Android UI设计：自定义Dialog

来源：互联网发布：ubuntu如何重启编辑：程序博客网时间：2024/06/01 07:27

一、自定义Dialog的布局样式

经过之前对AlertDialog的学习，掌握了AlertDialog的基本用法，了解了AlertDialog的样式与布局，现在来自己创建一个属于自己样式的Dialog。
首先根据AlertDialog的样式我们先进行对自己自定义的Dialog样式进行布局，之后再进行引入调用。

1、基本布局

布局方面我们可以知道，需要有标题栏、内容文本、取消与确定按钮。现在我们来看最基本的布局。
①布局：新建xml文件

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >  <TextView       android:id="@+id/textview_title1"      android:layout_width="match_parent"      android:layout_height="wrap_content"      android:text="我是一个标题"/>    <TextView       android:id="@+id/textview_content1"      android:layout_width="match_parent"      android:layout_height="wrap_content"      android:gravity="center"      android:text="我是一个内容"/>     <LinearLayout         android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal"        >      <Button         android:id="@+id/btn_nagetive1"        android:layout_width="0dp"       android:layout_weight="1"        android:layout_height="wrap_content"             android:text="取消"         />   <Button       android:id="@+id/btn_positive1"        android:layout_width="0dp"        android:layout_height="wrap_content"         android:layout_weight="1"         android:text="确定"         />   </LinearLayout></LinearLayout>

这里写图片描述

②activity调用：注意Dialog是一个基于activity的控件

primarydialog=new Dialog(MainActivity.this);        View view=getLayoutInflater().inflate(R.layout.myprimarydialog_layout, null);        TextView textview_title1=(TextView) view.findViewById(R.id.textview_title1);        TextView textview_content1=(TextView) view.findViewById(R.id.textview_content1);        Button nagetivebtn1=(Button) view.findViewById(R.id.btn_nagetive1);        Button positivebtn1=(Button) view.findViewById(R.id.btn_positive1);        textview_title1.setText("这是一个新设置的标题");        textview_content1.setText("这是一个新设置的内容");        nagetivebtn1.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {               Toast.makeText(getApplicationContext(), "亲，您点击了取消键哦", Toast.LENGTH_SHORT).show();                                                }        });        positivebtn1.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                Toast.makeText(getApplicationContext(), "亲，您点击了确定键哦", Toast.LENGTH_SHORT).show();                   primarydialog.dismiss();            }        });        primarydialog.setContentView(view);        primarydialog.show();

2、添加 shape属性的布局

在上面的例子中我们可以看到自定义的dialog在标题上方还存在一个空白的标题栏，而且现在弹出的对话框一般边角是圆弧型的，现在我们来将空白标题栏去掉并利用shape属性进行圆弧边角的设置。

空白标题栏的去除

关于空白标题栏的去除我们可以采用对dialog主题风格的设定的方式，首先在res下找到styles添加下面的语句。

 <style parent="@android:Theme.Dialog" name="NoDialogTitle">        <item name="android:windowFrame">@null</item>        <item name="android:windowNoTitle">true</item>        <item  name="android:windowBackground">@android:color/transparent</item>        <item name="android:windowIsFloating">true</item>        <item name="android:windowContentOverlay">@null</item>    </style>

调用

shapedialog=new Dialog(MainActivity.this,R.style.NoDialogTitle);

shape设置圆弧边角

这里对shape的相关属性进行简单的介绍，具体用法可以参见后面的代码

shape的属性：

corner （圆角）：radius
solid（实心可以填充颜色）：color
gradient（渐变）：color startcolor endcolor angle（必须为45的整数倍）
stroke（边框）：width dashGap（虚线） color

shape具体用法实例（新建xml）

这个代码是左下角的取消按钮设置圆弧角的代码

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <corners android:bottomLeftRadius="10dp" />    <solid android:color="#ff9900"/>    <gradient android:centerColor="#ff9900" android:angle="270"/>    <stroke android:width="5dp" android:color="#ffffff"/></shape>

可以先看下效果图
这里写图片描述

设置点击变换背景颜色

在drawable中事先准备好按钮被点击时的背景btn_left_pressed文件和btn_left_unpressed，再新建xml文件btn_left_backgrond添加代码。

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:drawable="@drawable/btn_left_pressed" android:state_pressed="true" ></item><item android:drawable="@drawable/btn_left_unpressed"></item></selector>

注意：此处按钮被点击的背景要写在常态背景前面。

完整版代码

MainActivity：

package com.example.mydialog;import android.os.Bundle;import android.app.Activity;import android.app.Dialog;import android.view.LayoutInflater;import android.view.Menu;import android.view.View;import android.view.View.OnClickListener;import android.widget.Button;import android.widget.TextView;import android.widget.Toast;public class MainActivity extends Activity implements OnClickListener{    private Button mbtn_primary;    private Button mbtn_shape;    private Dialog primarydialog;    private Dialog shapedialog;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mbtn_primary=(Button) findViewById(R.id.button1);        mbtn_primary.setOnClickListener(this);        mbtn_shape=(Button) findViewById(R.id.button2);        mbtn_shape.setOnClickListener(this);    }    @Override    public void onClick(View v) {        switch(v.getId()){        case R.id.button1:{            myprimarydialog();                              }break;        case R.id.button2:{            shapedialog();        }        default:break;        }    }    private void shapedialog() {        shapedialog=new Dialog(MainActivity.this,R.style.NoDialogTitle);        View view=getLayoutInflater().inflate(R.layout.myshapedialog_layout, null);        TextView textview_title1=(TextView) view.findViewById(R.id.textview_title2);        TextView textview_content1=(TextView) view.findViewById(R.id.textview_content2);        Button nagetivebtn1=(Button) view.findViewById(R.id.btn_nagetive2);        Button positivebtn1=(Button) view.findViewById(R.id.btn_positive2);        textview_title1.setText("这是一个新设置的标题");        textview_content1.setText("这是一个新设置的内容");        nagetivebtn1.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {               Toast.makeText(getApplicationContext(), "亲，您点击了取消键哦", Toast.LENGTH_SHORT).show();                                                }        });        positivebtn1.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                Toast.makeText(getApplicationContext(), "亲，您点击了确定键哦", Toast.LENGTH_SHORT).show();                   shapedialog.dismiss();            }        });        shapedialog.setContentView(view);        shapedialog.show();    }    public void myprimarydialog(){        primarydialog=new Dialog(MainActivity.this);        View view=getLayoutInflater().inflate(R.layout.myprimarydialog_layout, null);        TextView textview_title1=(TextView) view.findViewById(R.id.textview_title1);        TextView textview_content1=(TextView) view.findViewById(R.id.textview_content1);        Button nagetivebtn1=(Button) view.findViewById(R.id.btn_nagetive1);        Button positivebtn1=(Button) view.findViewById(R.id.btn_positive1);        textview_title1.setText("这是一个新设置的标题");        textview_content1.setText("这是一个新设置的内容");        nagetivebtn1.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {               Toast.makeText(getApplicationContext(), "亲，您点击了取消键哦", Toast.LENGTH_SHORT).show();                                                }        });        positivebtn1.setOnClickListener(new OnClickListener() {            @Override            public void onClick(View v) {                Toast.makeText(getApplicationContext(), "亲，您点击了确定键哦", Toast.LENGTH_SHORT).show();                   primarydialog.dismiss();            }        });        primarydialog.setContentView(view);        primarydialog.show();    }}

Layout：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >      <TextView       android:id="@+id/textview_title2"      android:layout_width="match_parent"      android:layout_height="wrap_content"      android:text="我是一个标题"/>    <TextView       android:id="@+id/textview_content2"      android:layout_width="match_parent"      android:layout_height="wrap_content"      android:gravity="center"      android:text="我是一个内容"/>     <LinearLayout         android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal"        >      <Button         android:id="@+id/btn_nagetive2"        android:layout_width="0dp"       android:layout_weight="1"        android:layout_height="wrap_content"            android:background="@drawable/btn_left_background"         android:text="取消"         />   <Button       android:id="@+id/btn_positive2"        android:layout_width="0dp"        android:layout_height="wrap_content"         android:layout_weight="1"        android:background="@drawable/btn_right_background"         android:text="确定"         />   </LinearLayout></LinearLayout>

btn_left_unpressed：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <corners android:bottomLeftRadius="10dp" />    <solid android:color="#ff99ff"/>    <gradient android:centerColor="#ff99ff" android:angle="270"/>    <stroke android:width="5dp" android:color="#ffffff"/></shape>

0 0