首页 > 解决方案 > 方向更改时带有列表视图的自定义对话框(横向模式)

问题描述

我希望我的自定义对话框能够在纵向和横向模式下工作。为此,我还找到了在 layout-land 文件夹中创建 XML 的解决方案。所以,我复制了布局并将其粘贴到 layout-land 文件夹中并进行了修改(添加了滚动视图)。尽管如此,它并没有像我预期的那样工作。尽管添加了滚动视图,但对话框并未完全滚动。

该对话框还包含一个列表视图。

我的 layout-land/dialog.xml 如下。

<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/transparent"
    tools:context="customviews.VeriDocDialog">

    <android.support.constraint.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:background="@color/transparent"
        app:layout_constraintBottom_toBottomOf="@id/center_fab_view"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">

    </android.support.constraint.ConstraintLayout>

    <android.support.constraint.ConstraintLayout
        android:id="@+id/top_fab_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="1dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/top_fab"
            android:layout_width="56dp"
            android:layout_height="56dp"
            android:background="@drawable/round_bg"
            android:scaleType="center"
            android:src="@drawable/share_24" />

    </android.support.constraint.ConstraintLayout>

    <View
        android:id="@+id/center_fab_view"
        android:layout_width="wrap_content"
        android:layout_height="1dp"
        app:layout_constraintCircle="@id/top_fab_layout" />

    <android.support.constraint.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/white"
        app:layout_constraintBottom_toBottomOf="@id/top_fab_layout"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/center_fab_view">

    </android.support.constraint.ConstraintLayout>

    <ImageView
        android:id="@+id/img_close"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:elevation="5dp"
        android:src="@drawable/cross_30"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/center_fab_view" />

    <ScrollView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/top_fab_layout">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            >

            <TextView
                android:id="@+id/dialog_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_margin="10dp"
                android:textColor="@color/primary_text"
                android:textSize="@dimen/textsize_xlarge"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                tools:text="TITLE" />

            <ImageView
                android:id="@+id/img"
                android:layout_width="45dp"
                android:layout_height="wrap_content"
                android:layout_below="@id/dialog_title"
                android:layout_centerHorizontal="true"
                android:src="@drawable/hr"
                app:layout_constraintBottom_toTopOf="@id/tv_instruction"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@id/dialog_title" />

            <TextView
                android:id="@+id/tv_instruction"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/img"
                android:layout_centerHorizontal="true"
                android:layout_margin="5dp"
                android:gravity="center"
                android:lines="2"
                android:text="invited friends \n to win more scrathches"
                android:textColor="@color/primary_text"
                android:textSize="@dimen/textsize_medium"
                app:layout_constraintBottom_toTopOf="@id/center_text"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@id/img" />

            <RelativeLayout
                android:id="@+id/center_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/tv_instruction"
                android:layout_centerHorizontal="true"
                android:layout_margin="5dp"
                app:layout_constraintBottom_toTopOf="@id/listview"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@id/tv_instruction">

                <TextView
                    android:id="@+id/tv_equation"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:gravity="center"
                    android:lines="2"
                    android:text="invite 1 = 2 Scratches"
                    android:textColor="@color/primary_text"
                    android:textSize="@dimen/textsize_medium" />

                <TextView
                    android:id="@+id/tv_highlighted_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:gravity="center"
                    android:padding="5dp"
                    android:text="Facebook"
                    android:textColor="@color/blue_A200"
                    android:textSize="@dimen/textsize_regular"
                    android:visibility="gone" />

            </RelativeLayout>

            <View
                android:id="@+id/view_above_listView"
                android:layout_width="wrap_content"
                android:layout_height="3dp"
                android:layout_above="@+id/listview"
                android:background="@drawable/primary_gradient_horizontal"
                app:layout_constraintBottom_toTopOf="@id/listview" />

            <ListView
                android:id="@+id/listview"
                android:layout_width="match_parent"
                android:layout_height="160dp"
                android:layout_below="@id/center_text"
                android:divider="@color/selected_gray"
                android:dividerHeight="1dp"
                app:layout_constraintBottom_toTopOf="@id/view_above_button"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@id/center_text" />

            <TextView
                android:id="@+id/tv_loading"
                android:layout_width="match_parent"
                android:layout_height="160dp"
                android:layout_below="@id/center_text"
                android:gravity="center"
                android:text=""
                android:textColor="@color/primary"
                android:textSize="16sp"
                android:visibility="gone"
                app:layout_constraintBottom_toTopOf="@id/view_above_button"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@id/center_text" />

            <View
                android:id="@+id/view_above_button"
                android:layout_width="wrap_content"
                android:layout_height="3dp"
                android:layout_above="@+id/btn_bottom"
                android:background="@drawable/primary_gradient_horizontal"
                app:layout_constraintBottom_toTopOf="@id/btn_bottom" />

            <Button
                android:id="@+id/btn_bottom"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/listview"
                android:background="@color/selected_gray"
                android:text="invite"
                android:textColor="@color/primary_text"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@id/listview" />

        </RelativeLayout>

    </ScrollView>

</android.support.constraint.ConstraintLayout>

Dialog 在纵向模式下的外观如何,请参见此处Vs。Dialog 在横向模式下的外观请参见此处

我的 VeriDocDialog.java 代码如下

public class VeriDocDialog extends Dialog {
     private View dialogView;

    public VeriDocDialog(@NonNull Context context, String dialogType, int iconDrawableId, String instructions,String bottomText, List<Contact> contactList, String buttonText) {

        super(context);
        this.context = context;
        this.dialogType = dialogType;
        this.iconDrawableId = iconDrawableId;
        this.instruction = instructions;
        this.buttonText = buttonText;
        this.contactList = contactList;
        this.bottomText = bottomText;

        setupVeriDocDialog();
    }

    public VeriDocDialog(@NonNull Context context, String dialogType, int iconDrawableId, String instructions, String bottomText, List<ResolveInfo> shareList, String buttonText, Intent shareIntent) {

        super(context);
        this.context = context;
        this.dialogType = dialogType;
        this.iconDrawableId = iconDrawableId;
        this.instruction = instructions;
        this.buttonText = buttonText;
        this.shareList = shareList;
        this.bottomText = bottomText;
        this.shareIntent = shareIntent;

        setupVeriDocDialog();
    }

    private void setupVeriDocDialog() {

        if (getWindow() != null) {
            getWindow().setBackgroundDrawableResource (R.color.transparent);
            getWindow().setGravity(Gravity.CENTER);
            getWindow().getAttributes().windowAnimations = R.style.dialogAnimation;
            requestWindowFeature(Window.FEATURE_NO_TITLE);
        }
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);

         dialogView = getLayoutInflater().inflate(R.layout.dialog_veri_doc, null);
         setContentView(dialogView);

         bindView();
         initialise(dialogType);
     }

     //.... and other methods .....
}    

我如何从我的活动中调用此对话框:

private void displayInviteDialog() {
    contactList = new ArrayList<>();

    inviteDialog = new VeriDocDialog(ScratchAndWinActivity.this,
            VeriDocDialog.TYPE_INVITE,
            R.drawable.invite_32,
            getString(R.string.str_invite_instruction),
            getString(R.string.str_equation_invite),
            contactList, VeriDocDialog.TYPE_INVITE);


    inviteDialog.show();
}

问题是,布局不合适。我也提到了土地文件夹中的xml布局。并且还将视图放在滚动视图中,但滚动视图仍然不会将对话框滚动到其底部。

是因为listview?如果是,那么请给我一些解决方案。如果不是,可能是什么原因以及如何克服这种情况?任何帮助,将不胜感激。

当我尝试在方向为横向时打开对话框时,land 文件夹中的 xml 被夸大了。但是,当我以纵向打开对话框然后更改方向时,xml 是相同的(在常规布局中相同,而不是来自land 文件夹)。

请帮我解决这个问题。

标签: androiddialogscreen-orientationcustomdialog

解决方案


这是因为您的 Dialog 在屏幕方向更改后不会重新创建。它有旧的资源布局。

对于解决方案,如果已打开,您可以检测方向更改重新创建对话框。您可以onConfigurationChanged在 Activity 中使用来检测方向变化。

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);

    if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
        Toast.makeText(this, "landscape", Toast.LENGTH_SHORT).show();
    } else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
        Toast.makeText(this, "portrait", Toast.LENGTH_SHORT).show();
    }

    if (inviteDialog !=null && inviteDialog.isShowing()){
        inviteDialog .dismiss(); 
        displayInviteDialog();
    }
}

private void displayInviteDialog() {
    contactList = new ArrayList<>();

    inviteDialog = new VeriDocDialog(ScratchAndWinActivity.this,
            VeriDocDialog.TYPE_INVITE,
            R.drawable.invite_32,
            getString(R.string.str_invite_instruction),
            getString(R.string.str_equation_invite),
            contactList, VeriDocDialog.TYPE_INVITE);


    inviteDialog.show();
}

并稍微编辑您的清单活动注册。

<activity android:name=".YourActivity"
      android:configChanges="orientation">

建议:

1> 您应该使用 match_parent 作为 Dialog 的父布局元素。

android:layout_width="match_parent"
android:layout_height="match_parent"

2> 也以编程方式设置对话框高度和宽度 match_parent。看到这个答案

更新

使用NestedScrollView而不是ScrollView因为 ListView 本身具有滚动属性,这会导致冲突。

更新

我创建了一个示例,在这两种模式下都可以正常工作,您会惊讶地发现我没有为对话框设置任何特殊属性以使其正常工作。这是示例。

import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.Window;
import android.view.WindowManager;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import com.innovanathinklabs.sample.R;

/**
 * Created by KHEMRAJ on 8/29/2018.
 */
public class ListActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        MyDialog dialog = new MyDialog(this);
        dialog.show();
        Window window = dialog.getWindow();
        window.setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.MATCH_PARENT);
    }

    public static class MyDialog extends Dialog {
        String[] mobileArray = {
                "Android", "IPhone", "WindowsMobile", "Blackberry",
                "WebOS", "Ubuntu", "Windows7", "Max OS X", "Android", "IPhone", "WindowsMobile", "Blackberry",
                "WebOS", "Ubuntu", "Windows7", "Max OS X", "Android", "IPhone", "WindowsMobile", "Blackberry",
                "WebOS", "Ubuntu", "Windows7", "Max OS X",
        };

        public MyDialog(@NonNull Context context) {
            super(context);
        }

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.dialog_sample);
            ArrayAdapter adapter = new ArrayAdapter<>(getContext(),
                    R.layout.row_list, mobileArray);
            ListView listView = findViewById(R.id.listView);
            listView.setAdapter(adapter);
        }
    }
}

和 dialog_sample.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <!--in this view, horizontal and vertical both dialog has scrollable List and other view looks static-->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="5">

        <!--place your all top content here-->
    </LinearLayout>

    <!--weight 1 is giving List view the available space. -->

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="5"/>

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/app_name"/>

</LinearLayout>

这是输出

在此处输入图像描述

在此处输入图像描述

请注意。

  • 我没有处理方向,它按预期工作。
  • 我将权重设置为子视图。所以它会自动适应两个方向。
  • 您的 xml 布局中的问题是您没有使用权重/百分比,因此内容会出现在屏幕之外。

推荐阅读