大家在开发的过程中,可能都碰过这样的问题,系统提供的AlertDialog就是一个矩形的大白框,然后两个按钮,一个代表确定,一个代表取消。这样再调用的过程中,整个界面显得过于单调,如果应用里面的界面大多都是鲜艳的颜色,这样显得更加丑陋。下面,我将针对这个问题进行详细的讲解。
最重要的工作:
要准备一个xml文件,对话框里面显示这个界面;
我在这个里面主要用到了selector+shape,这个界面就是用这两个东西做出来的。如果这个东西用的不熟的可以直接看我上几期的微博android中shape的使用和selector里面使用shape;
这里面和我们系统自带的对话框表面上有什么不同点呢?
1.整体布局是圆角矩阵,而系统自带的是矩形;
2.里面每个地方的颜色全部由自己来控制,系统的只可以控制里面的文字;
3.按钮的位置和点击效果完全由自己控制。
怎么实现的呢?
1.准备xml文件
myalertdialog.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_gravity="center_vertical"
android:id="@+id/relativeLayout"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
--下面这个颜色尤为重要,否则你会发现四个边角空为白色(因为这个大的布局里面放圆角矩形,所以会空出来未填充的地方)-->
android:background="#646464" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentTop="true"
--shape中定义-->
android:background="@drawable/topdialog"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:gravity="center"
android:id="@+id/relativeLayout2">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="确定吗?"
android:textColor="#ffffff"
android:textSize="30sp"
android:id="@+id/textView2"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/relativeLayout2"
android:layout_alignLeft="@+id/relativeLayout2"
android:layout_alignStart="@+id/relativeLayout2"
--shape中定义-->
android:background="@drawable/write_bg">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="确定"
android:textColor="#7A787D"
android:textSize="18sp"
android:id="@+id/button3"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="20dp"
android:background="@drawable/press_up"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="取消"
android:textColor="#7A787D"
android:textSize="18sp"
android:id="@+id/button4"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="20dp"
android:background="@drawable/press_up"/>
RelativeLayout>
RelativeLayout>
RelativeLayout>
头部蓝色
topdialog.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#00ffff">solid>
<corners android:topLeftRadius="10dp"
android:topRightRadius="10dp"/>
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp"/>
shape>
不太清楚可以看android中shape的使用
下面灰色区域
write_bg.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#D6DADB">solid>
<corners android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"/>
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp"/>
shape>
按钮的控制
press_up.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="false">
<shape>
<solid android:color="#ACDCC4">solid>
<corners android:radius="10dp" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
shape>
item>
<item android:state_selected="true">
<shape>
<solid android:color="#89BD98">solid>
<corners android:radius="10dp" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
shape>
item>
selector>
不太清楚可以看selector里面使用shape;
android代码:
public class MyAlertDialogActivity extends AppCompatActivity{
//点击这个按钮显示对话框
Button btn;
//对话框中左边的按钮
Button button3;
//对话框中右边的按钮
Button button4;
//蓝色区域可以手动的进行设置哪些文本
TextView textView2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my_alert_dialog);
textView2 = (TextView) findViewById(R.id.textView2);
btn = (Button) findViewById(R.id.button);
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//创建一个AlertDialog对话框
AlertDialog alertDialog = new AlertDialog.Builder(MyAlertDialogActivity.this).create();
//显示
alertDialog.show();
Window window = alertDialog.getWindow();
//对话框中显示的哪一个布局
window.setContentView(R.layout.myalertdialog);
//从该布局中获取相应的控件
button3 = (Button) window.findViewById(R.id.button3);
//点击事件
button3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(MyAlertDialogActivity.this,"1",Toast.LENGTH_SHORT).show();
button3.setSelected(true);
button4.setSelected(false);
}
});
button4 = (Button) window.findViewById(R.id.button4);
button4.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(MyAlertDialogActivity.this,"2",Toast.LENGTH_SHORT).show();
button3.setSelected(false);
button4.setSelected(true);
}
});
}
});
}
}