圆弧Dialog

                好久不写文章了，今天也来写写，正好工作上没有什么事，最近也一直在学习自定义View，有一些自己写的东西分享给大家

相信大家都有过一种体验，就是觉得android 原生的控件有很多样式丑的实在忍受不了，比如我使用12306的app购买火车票的时候，发现对话框居然是原生的，从优化的角度上来说，使用原生的确会比自定义的view运行要快，流畅。但是我感觉这两者之间的差距很难区分，所以没有比较在这个上面纠结，当然如果自定义的view过多肯定会造成卡。所以现在应用开发都是两者结合更多，同时我相信未来google也会在view样式做出修改，最大程度的去从用户的角度做出美感样式。

言归正传，在使用很多app的时候你们都想着原生样式太丑，所以我们才会有想法去自己写样式，今天都开始来做一个dialog的样式。

分析一下

圆弧形的dialog可以有两种实现 其一、使用圆弧形.9 的图片 其二、使用自定义样式

我这里讲讲自定义样式的圆弧

既然是自定义，那么我们的dialog内部的控件都需要自己去组合，首先来看看大概我们需要哪些控件

原生 包含(标题、提示内容、按钮)

同样我们也从这几个基本的控件开始

上 正中间：标题

中 正中间：提示

下 左：按钮 右：按钮 (如下图)

画出来的图不是很好看，我发现这个编辑现在有问题了，这是一个效果图，大家就将就一下看吧，下次我争取画正规点

                        接下来就是布局文件tipsdialog.xml

     一、dialog布局                    

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tipsdialog_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/trangle"
    android:orientation="vertical" >


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:gravity="center"
        android:orientation="horizontal" >


        <ImageView
            android:id="@+id/tipsTitleImg"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center_vertical" />


        <TextView
            android:id="@+id/tipsTitleText"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:singleLine="true"
            android:text="tips"
            android:textColor="#000000"
            android:textSize="20sp" />
    </LinearLayout>


    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="#B8B8B8" />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        android:paddingBottom="25dp"
        android:paddingTop="25dp" >


        <ImageView
            android:id="@+id/tipsContentImg"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center_vertical" />


        <TextView
            android:id="@+id/tipsContent"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:singleLine="true"
            android:text="This is a tips content"
            android:textColor="#000000"
            android:textSize="16sp" />
    </LinearLayout>


    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="#B8B8B8" />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@android:color/transparent"
        android:gravity="center"
        android:orientation="horizontal" >


        <TextView
            android:id="@+id/tipsBtCancel"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1.0"
            android:background="@drawable/alertdialog_left_selector"
            android:gravity="center"
            android:singleLine="true"
            android:text="取消"
            android:textColor="#000000"
            android:textSize="15sp" />


        <View
            android:id="@+id/tipsBtdivideline"
            android:layout_width="0.5dp"
            android:layout_height="match_parent"
            android:background="#B8B8B8" >
        </View>


        <TextView
            android:id="@+id/tipsBtConfirm"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1.0"
            android:background="@drawable/alertdialog_right_selector"
            android:gravity="center"
            android:singleLine="true"
            android:text="确定"
            android:textColor="#000000"
            android:textSize="15sp" />
    </LinearLayout>


</LinearLayout>

上面就是对dialog的布局  红色代码是我要着重强调的样式，同时大家也发现了一个问题标题和提示我都加了一个ImageView控件，这样做的目的是为了防止我们开发中需要显示图片标题或者图片内容

       圆角样式 trangle.xml

       <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >


    <solid android:color="#FFFFFF" />


    <corners
        android:bottomLeftRadius="15dp"
        android:bottomRightRadius="15dp"
        android:topLeftRadius="15dp"
        android:topRightRadius="15dp" />


    <stroke
        android:width="0dp"
        android:color="#cccccc" />
</shape>

 左按钮样式

选择器

alertdialog_left_selector

            <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">


    <item android:drawable="@drawable/button_left_pressed" android:state_pressed="true"/>
    <item android:drawable="@drawable/button_left_unpressed" android:state_pressed="false"/>


</selector>

样式

button_left_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >


    <solid android:color="#D6DAE1" />


    <corners
        android:bottomLeftRadius="15dp" />


    <stroke
        android:width="0dp"
        android:color="#ffffff" />
</shape>

  按下的效果就不写了，只是一个颜色变化  同样右边按钮的样式这里就不在赘述了，大家模仿写就可以了，只是圆角的方向不一样    

<corners  android:bottomLeftRadius="15dp" />  修改一下这一句 就OK了

到此布局都完成了

二、对布局控件获取、 封装成一个布局控件TipsDiaolg

         定义一个类 TipsDiaolg

      原生的dialog有一个方法builder()

      我们写个这样的方法用户初始化创建这个dialog

   public TipsDiaolg builder() {
// 获取Dialog布局
View view = LayoutInflater.from(context).inflate(R.layout.tipsdialog,
null);
tipsdialog_layout = (LinearLayout) view
.findViewById(R.id.tipsdialog_layout);
tipsTitleImg = (ImageView) view.findViewById(R.id.tipsTitleImg);
tipsContentImg = (ImageView) view.findViewById(R.id.tipsContentImg);
tipsContentText = (TextView) view.findViewById(R.id.tipsContent);
tipsTitleText = (TextView) view.findViewById(R.id.tipsTitleText);
tipsBtCancel = (TextView) view.findViewById(R.id.tipsBtCancel);
tipsBtConfirm = (TextView) view.findViewById(R.id.tipsBtConfirm);
tipsBtdivideline = (View) view.findViewById(R.id.tipsBtdivideline);
dialog = new Dialog(context, R.style.AlertDialogStyle);
dialog.setContentView(view);
// 调整dialog背景大小
tipsdialog_layout.setLayoutParams(new FrameLayout.LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
return this;
}

       dialog  需要把view 既我们定义的布局加载，这样就相当于拥有dialog的属性

然后我们就自定定义一些需要的方法

       // 设置View可见性
public void setViewVisiable(int titleImg, int titleText, int contentImg,int contentText) ;

  // 设置title
public void setTitleText(String title)

        等等方法，大家可以很据需要扩展，稍后我会把源码分享出来

     最后在调用

    到此，圆弧形dialog就可以了，其实主要就是个点 

1、布局  (建议布局多考虑一些可能会用到的控件都写进去，不用的话可以设置不可见，这样扩展性会好点)

2、设置圆弧样式和按钮弧形样式，其实不难

3、封装的扩展性，尽量多考虑一些方法用于扩展，例如我在这里加了单个按钮或者无按钮的对话框的方法，这样我又可以重复利用这个布局来做加载进度框

最后附上代码

TipsDialog.java

package com.mars.marsview.view;


import android.app.Dialog;
import android.content.Context;
import android.view.Display;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.WindowManager;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;


import com.mars.marsview.R;


public class TipsDiaolg {
private ImageView tipsTitleImg = null;
private ImageView tipsContentImg = null;
private TextView tipsTitleText = null;
private TextView tipsContentText = null;
private TextView tipsBtCancel = null;
private TextView tipsBtConfirm = null;


private View tipsBtdivideline;
private Context context;
private LinearLayout tipsdialog_layout;


private Display display = null;
private Dialog dialog = null;


public TipsDiaolg(Context context) {
this.context = context;
WindowManager windowManager = (WindowManager) context
.getSystemService(Context.WINDOW_SERVICE);
display = windowManager.getDefaultDisplay();
}


public TipsDiaolg builder() {
// 获取Dialog布局
View view = LayoutInflater.from(context).inflate(R.layout.tipsdialog,
null);
tipsdialog_layout = (LinearLayout) view
.findViewById(R.id.tipsdialog_layout);
tipsTitleImg = (ImageView) view.findViewById(R.id.tipsTitleImg);
tipsContentImg = (ImageView) view.findViewById(R.id.tipsContentImg);
tipsContentText = (TextView) view.findViewById(R.id.tipsContent);
tipsTitleText = (TextView) view.findViewById(R.id.tipsTitleText);
tipsBtCancel = (TextView) view.findViewById(R.id.tipsBtCancel);
tipsBtConfirm = (TextView) view.findViewById(R.id.tipsBtConfirm);
tipsBtdivideline = (View) view.findViewById(R.id.tipsBtdivideline);
dialog = new Dialog(context, R.style.AlertDialogStyle);
dialog.setContentView(view);
// 调整dialog背景大小
tipsdialog_layout.setLayoutParams(new FrameLayout.LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
return this;
}


// 设置View可见性
public void setViewVisiable(int titleImg, int titleText, int contentImg,
int contentText) {
showView(tipsTitleImg, titleImg);
showView(tipsTitleText, titleText);
showView(tipsContentImg, contentImg);
showView(tipsContentText, contentText);
}


public void showView(View view, int showFlag) {
if (showFlag == 1) {
view.setVisibility(View.VISIBLE);
} else {
view.setVisibility(View.GONE);
}
}


// 设置title
public void setTitleText(String title) {
if ("".equals(title) || title == null) {
tipsTitleText.setText("系统提示");
} else {
tipsTitleText.setText(title);
}
}


// 设置内容
public void setContentText(String title) {
if ("".equals(title) || title == null) {
tipsContentText.setText("数据有误，请稍后重试");
} else {
tipsContentText.setText(title);
}
}


// 设置返回键是否关闭dialog
public void setCancelable(boolean cancel) {
dialog.setCancelable(cancel);
}


// 设置titleImg
public void setTitleImg(int titleImgId) {
tipsTitleImg.setImageResource(titleImgId);
}


// 设置ContentImg
public void settipsContentImg(int contentImgId) {
tipsContentImg.setImageResource(contentImgId);
}


// 按钮事件
public void setBtOnclickListener(OnClickListener listener) {
tipsBtCancel.setOnClickListener(listener);
tipsBtConfirm.setOnClickListener(listener);
}


// 设置布局效果
private void setLayout(int btVisibale) {
if (btVisibale == 2) {
tipsBtCancel
.setBackgroundResource(R.drawable.alertdialog_left_selector);
tipsBtConfirm


.setBackgroundResource(R.drawable.alertdialog_right_selector);
} else {
tipsBtdivideline.setVisibility(View.GONE);
tipsBtConfirm
.setBackgroundResource(R.drawable.alertdialog_single_selector);
}
}


public void setBtVisiable(int cancel, int confirm) {
if (cancel == 0) {
tipsBtCancel.setVisibility(View.GONE);
} else {
tipsBtCancel.setVisibility(View.VISIBLE);
tipsBtdivideline.setVisibility(View.VISIBLE);
}
if (confirm == 0) {
tipsBtConfirm.setVisibility(View.GONE);
} else {
tipsBtConfirm.setVisibility(View.VISIBLE);
}
if (cancel == 0 && confirm == 1) {
setLayout(1);
} else {
setLayout(2);
}
}


public void show() {
dialog.show();
}


public void dismiss() {
if (dialog != null && dialog.isShowing()) {
dialog.dismiss();
}
}
}

AlertDialogStyle

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

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tipsdialog_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/trangle"
    android:orientation="vertical" >


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:gravity="center"
        android:orientation="horizontal" >


        <ImageView
            android:id="@+id/tipsTitleImg"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center_vertical" />


        <TextView
            android:id="@+id/tipsTitleText"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:singleLine="true"
            android:text="tips"
            android:textColor="#000000"
            android:textSize="20sp" />
    </LinearLayout>


    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="#B8B8B8" />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        android:paddingBottom="25dp"
        android:paddingTop="25dp" >


        <ImageView
            android:id="@+id/tipsContentImg"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center_vertical" />


        <TextView
            android:id="@+id/tipsContent"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:singleLine="true"
            android:text="This is a tips content"
            android:textColor="#000000"
            android:textSize="16sp" />
    </LinearLayout>


    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="#B8B8B8" />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@android:color/transparent"
        android:gravity="center"
        android:orientation="horizontal" >


        <TextView
            android:id="@+id/tipsBtCancel"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1.0"
            android:background="@drawable/alertdialog_left_selector"
            android:gravity="center"
            android:singleLine="true"
            android:text="取消"
            android:textColor="#000000"
            android:textSize="15sp" />


        <View
            android:id="@+id/tipsBtdivideline"
            android:layout_width="0.5dp"
            android:layout_height="match_parent"
            android:background="#B8B8B8" >
        </View>


        <TextView
            android:id="@+id/tipsBtConfirm"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1.0"
            android:background="@drawable/alertdialog_right_selector"
            android:gravity="center"
            android:singleLine="true"
            android:text="确定"
            android:textColor="#000000"
            android:textSize="15sp" />
    </LinearLayout>


</LinearLayout>