UI编写经验小结--弹窗

异形弹窗

编写界面

• 使用RelativeLayout 布局
• 宽高一般是背景图的大小
• 背景图放在ImageView中
• 弹窗上的控件放在LinearLayout中
  • webview 透明（可见背景图）

    • mWebView.setBackgroundColor(0); // 设置背景色  
      mWebView.getBackground().setAlpha(0);

  • webview 修改滚动条样式

    • android:scrollbarThumbVertical="@drawable/custom_scrollbar_thumb"
      style="@style/CustomWebView"
      
      
      
      //style
          <style name="CustomWebView" tools:ignore="ResourceName">
              <item name="android:scrollbarSize">3dp</item>
          </style>

  • 下方按钮组合充满剩余的空间
    

      <LinearLayout
                android:id="@+id/ll_btn"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:layout_marginLeft="@dimen/dp_30"
                android:layout_marginRight="@dimen/dp_30"
                android:gravity="center_vertical"
                android:orientation="vertical">
    
                <TextView
                     />
    
                <TextView
                     />
            </LinearLayout>

编写activity

• 没有背景的弹窗，需要继承dialog，重定义样式                

 UpdateCheckDialog updateDialog = new UpdateCheckDialog(mActivity,R.style.HomeUpdateDialog);

public class UpdateCheckDialog  extends Dialog {

    、、、


    public UpdateCheckDialog(Activity activity, int themeResId) {
        super(activity, themeResId);
        this.activity = activity;
    }
    、、、

}

   <style name="HomeUpdateDialog" parent="android:style/Theme.Dialog" tools:ignore="ResourceName">
        <item name="android:windowFrame">@null</item>
        <item name="android:windowFullscreen">false</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@drawable/home_update_transpant_bg</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

• 弹窗点击其他位置不消失

// 点击非弹窗其他位置不消失
 this.setCanceledOnTouchOutside(false);

//点击系统返回按钮不消失
 this.setCancelable(false);

底部弹窗

界面编写

•  小屏幕手机显示不全，可以使用ScrollView
  • 需注意，使用之后，底部截至显示到最后一个控件位置，不会展示剩余的“空白高度内容”
  • 若需要展示剩下的内容，可以再添加一个控件，占满高度，或再最后一个控件添加距离

<?xml version="1.0" encoding="utf-8"?>

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <LinearLayout
           、、、
    </LinearLayout>
</ScrollView>

  <View
        android:layout_width="match_parent"
        android:layout_height="125dp"/>

 代码编写

•  继承dialog
•   弹入弹出效果

    public QrcodeDialog(Activity activity) {
        super(activity, R.style.BottomDialog);
        this.activity = activity;
    }


//style
    <style name="BottomDialog" parent="@android:style/Theme.Dialog" tools:ignore="ResourceName">

        <!-- 背景透明 -->
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowContentOverlay">@null</item>
        <!-- 浮于Activity之上 -->
        <item name="android:windowIsFloating">true</item>
        <!-- 边框 -->
        <item name="android:windowFrame">@null</item>
        <!-- Dialog以外的区域模糊效果 -->
        <item name="android:backgroundDimEnabled">true</item>
        <!-- 无标题 -->
        <item name="android:windowNoTitle">true</item>
        <!-- 半透明 -->
        <item name="android:windowIsTranslucent">true</item>
        <!-- Dialog进入及退出动画 -->
        <item name="android:windowAnimationStyle">@style/DialogAnimation</item>
    </style>
    <!-- ActionSheet进出动画 -->
    <style name="DialogAnimation" parent="@android:style/Animation.Dialog" tools:ignore="ResourceName">
        <item name="android:windowEnterAnimation">@anim/dialog_in</item>
        <item name="android:windowExitAnimation">@anim/dialog_out</item>
    </style>

• 显示在底部、宽度是屏幕宽度

// 显示在底部
getWindow().setGravity(Gravity.BOTTOM);

// 宽度显示为屏幕宽度  
WindowManager m = getWindow().getWindowManager();

DisplayMetrics metrics = new DisplayMetrics();
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
       m.getDefaultDisplay().getRealMetrics(metrics);
        } else {
            m.getDefaultDisplay().getMetrics(metrics);
        }
int screenWidth = metrics.widthPixels;
WindowManager.LayoutParams p = getWindow().getAttributes();
p.width = screenWidth; //设置dialog的宽度为当前手机屏幕的宽度
getWindow().setAttributes(p);