show code block

2017年7月5日 星期三

Android元件(AlertDialog) — 簡易客製化Dialog、不同layout的hanlder回調、dip轉px固定高度

前言：

最近看網路上的Code發現有些前輩會使用代碼的方式畫xml。
在還接觸到android studio之後，所有的畫面元件我都是在XML上完成的，使用代碼畫畫面對我來說是一件新鮮的事情。
之後我多多少少都會在範例中使用一些代碼畫xml的方式（像是上一篇的自製側邊欄）。
畢竟，要成功除了1w小時定律，『刻意練習』是成功必須面對的路。

今日實作DEMO



重點程式碼：

在客製化的dialog的class內繼承 AlertDialog
簡易客製化Dialog
1、先畫出custom_dialog.xml
2、寫一個class把custom_dialog寫進去

 View view = LayoutInflater.from(context).inflate(R.layout.activity_dialog, null);
        setView(view);

3、在要使用的頁面呼叫他



不同layout的hanlder回調

 private Handler mTextHandler;//INIT Handler
//添加點擊事件
        text.setOnClickListener(onClickListener);
 //設定點擊事件
    View.OnClickListener onClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            switch (view.getId()) {
                case R.id.message_dialog:
                    //設定Handler回傳
                    mTextHandler.sendEmptyMessage(0);
                    break;
            }
        }
    };

    //讓其他activity能使用，設定點擊事件
    public void setmTextHandler(Handler handler) {
        this.mTextHandler = handler;
    }
dip轉px固定高度
p.s.這個方法在使用code畫畫面的時候常常出現。通常是寫在自定義的application內，求方便範例我就先寫在activity

  //固定高度使用，讓dip轉成px
    public static int dip2px(float dipValue) {
//        Math.round(470 * displayMetrics.density);
        int density = (int) context.getResources().getDisplayMetrics().density;
        return (int) (dipValue * density + 0.5f);
    } 
pixel圖示

 px: pixel就是像素，代表的是螢幕上確切可顯示的點數。
『點』這個字要拿出來特別強調，因為螢幕的解析度就是靠這些點拼湊出來的。
如有兩台相同解析度的手機，但螢幕大小不同，較大螢幕的pixel就會相對較大。
dip:density_independent pixels 他是一種會根據不同螢幕自行轉換的單位。 如果有螢幕得密度是 160像素，此時1dp = 1px但如果螢幕密度變成320像素，此時就會變成1dp = 2px

完整程式碼：

看看今天實作的部分

先來看看activity_main.xml
activity_main.xml 
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.hello.kaiser.handler.MainActivity">

    <TextView
        android:id="@+id/call_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>
中間放一個TextView用來當作點擊跳出Dialog的Button。






畫CustomDialog

activity_dialog.xml 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.hello.kaiser.handler.CustomDialog">

    <TextView
        android:id="@+id/message_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="我是客製化Dialog" />
</RelativeLayout>
activity_dialog.xml 中間放一個TextView用來判別這是客製化的Dialog。


再來畫一個沒做功能的toolbar，筆者在這邊做這功能是想試著自製ToolBar。（完全沒有功能，只是想加） 
activity_toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.hello.kaiser.handler.CustomToolbar">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="toolbar" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_alignParentBottom="true"
        android:background="@android:color/black" />
</RelativeLayout>

接下來先從簡單的寫起，ToolBar因為沒有實質上的功能，所以很簡單，就是把一個View塞入繼承RelativeLayout 的class內。
CustomToolbar.java 

public class CustomToolbar extends RelativeLayout {


    public CustomToolbar(Context context) {
        super(context);
        View view = LayoutInflater.from(context).inflate(R.layout.activity_toolbar, this, false);
        addView(view);
    }
}
如果在自製的ToolBar上要加上東西，可以把元件寫在這，例如通常在app左上角的漢堡選單之類。
把ToolBar單獨拉出來寫有什麼好處呢？
可以避免在MainActivity內寫入太多的程式碼，顯得臃腫難讀。


接下來寫Custom Dialog囉，重頭戲，解釋我都寫在註解裡了。
CustomDialog
public class CustomDialog extends AlertDialog {
    private TextView text;
    private Handler mTextHandler;//INIT Handler

    protected CustomDialog(@NonNull Context context) {
        super(context);
        //設定View
        View view = LayoutInflater.from(context).inflate(R.layout.activity_dialog, null);
        setView(view);

        text = view.findViewById(R.id.message_dialog);
        text.setText("讀取中....");
        //添加點擊事件
        text.setOnClickListener(onClickListener);
    }
    //設定點擊事件
    View.OnClickListener onClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            switch (view.getId()) {
                case R.id.message_dialog:
                    //設定Handler回傳
                    mTextHandler.sendEmptyMessage(0);
                    break;
            }
        }
    };

    //讓其他activity能使用，設定點擊事件
    public void setmTextHandler(Handler handler) {
        this.mTextHandler = handler;
    }

    //本來是設定Dialog上面的Title部分，這裡我把super繼承的地方刪掉，寫來設定text要顯示的字串
    @Override
    public void setMessage(CharSequence message) {
        text.setText(message);
    }
}

MainActivity.java
/**
 * 客製化Dialog
 */
public class MainActivity extends Activity {

    private CustomToolbar customToolbar;
    private static Context context;
    private CustomDialog dialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        context = this;
        //init 客製化的Toolbar
        customToolbar = new CustomToolbar(this);
        //設定客製化的params，長寬
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, dip2px(44));
        //把客製化的toolbar塞入MainActivity的View
        addContentView(customToolbar, params);
        //設定中間文字的點擊事件
        findViewById(R.id.call_dialog).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //呼叫自定義的客製化Dialog
                dialog = new CustomDialog(context);
                dialog.setMessage("hello loading .....");
                dialog.show();
                //設定客製化的點擊效果
                dialog.setmTextHandler(new Handler() {
                    @Override
                    public void handleMessage(Message msg) {
                        super.handleMessage(msg);
                        Toast.makeText(MainActivity.this, "HelloPress", Toast.LENGTH_SHORT).show();
                    }
                });
            }
        });


    }

    //固定高度使用，讓dip轉成px
    public static int dip2px(float dipValue) {
//        Math.round(470 * displayMetrics.density);
        int density = (int) context.getResources().getDisplayMetrics().density;
        return (int) (dipValue * density + 0.5f);
    }

}

DEMO：

https://drive.google.com/open?id=0Byk75IYx-dKXTzlnemF3VUpMRUk


於
標籤： , , , , ,

2 則留言:

訂閱： 張貼留言 (Atom)

協程(coroutine) - 協程為什麼要學它？

 Coroutine 協程 再強調一次 協程就是由kotlin官方所提供的線程api //Thread Thread { }.start() //Executor val execu...

  • Fragment的使用(二) ─ 在activity內切換Fragment
    Fragment 的使用 ( 二 ) ─ 在 activity 內切換 Fragment 前言： (更新聲明2017/03/08) 做個小聲明：在這邊建議太過複雜的畫面不要使用Fragment。 這聲明是流著淚打出來的，Fragment是個超級大坑...
  • Android元件 ─ 要求權限 Permission (一)
    前言： 權限其實沒有想像中的困難 。 在Android版本6.0以上，為了安全設計，就全面要求app要和使用者要求權限。 市面上還出現了像是 EasyPermissions 這類專門幫你拿取權限的第三方套件。 EasyPermissions官方： htt...