TDialog的基本使用，輕鬆實現Android任意彈窗
阿新 • • 發佈：2018-12-23
TDialog是用於實現Android彈窗的框架
一、先看效果圖
二、程式碼實現
1.在app模組下的build.gradle引入TDialog
implementation 'com.timmy.tdialog:tdialog:1.3.1'2.建立彈窗佈局dialog.xml，這裡根據自己的需要寫
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" xmlns:app="http://schemas.android.com/apk/res-auto"> <ImageView android:id="@+id/bg" android:src="@drawable/bg_dialog" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" app:layout_constraintVertical_bias="0.6" app:layout_constraintHorizontal_bias="0.55" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/cancel" android:text="Cancel" android:textAllCaps="false" android:background="#00000000" app:layout_constraintTop_toTopOf="parent" app:layout_constraintLeft_toLeftOf="@id/bg" app:layout_constraintRight_toRightOf="@id/bg" app:layout_constraintBottom_toBottomOf="@id/bg" app:layout_constraintHorizontal_bias="0.88" app:layout_constraintVertical_bias="0.9" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <Button android:id="@+id/ok" android:text="OK" android:textAllCaps="false" android:background="#00000000" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="@id/bg" app:layout_constraintRight_toLeftOf="@id/cancel" app:layout_constraintVertical_bias="0.9" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </android.support.constraint.ConstraintLayout>
附上背景圖：
3.程式碼中使用TDialog：
new TDialog.Builder(getSupportFragmentManager()) .setLayoutRes(R.layout.dialog) //設定彈窗展示的xml佈局 .setScreenWidthAspect(MainActivity.this, 0.8f) //設定彈窗寬度(引數aspect為螢幕寬度比例 0 - 1f) .setScreenHeightAspect(MainActivity.this, 0.3f) //設定彈窗高度(引數aspect為螢幕寬度比例 0 - 1f) .addOnClickListener(R.id.ok,R.id.cancel) .setOnViewClickListener(new OnViewClickListener() { @Override public void onViewClick(BindViewHolder viewHolder, View view, TDialog tDialog) { switch (view.getId()){ case R.id.ok: TextView text = viewHolder.getView(R.id.text); text.setText("點選了ok"); break; case R.id.cancel: tDialog.dismiss(); break; } } }) .create() //建立TDialog .show(); //展示
根據螢幕比例設定彈窗的寬高，需要新增點選事件的話，先使用addOnClickListener將控制元件id傳入，再在setOnViewClickListener中根據點選的id觸發相應的事件。需要用到佈局中的控制元件的話，使用viewHolder.getView(R.id.xxx)找到控制元件，再進行相應的操作即可。這裡作者也提供了另一種操作方式，如上圖中的
TextView text = viewHolder.getView(R.id.text);
text.setText("點選了ok");也可以寫成：
viewHolder.setText(R.id.text,"點選了ok");
4.如果在開啟彈窗時需要進行一些初始化操作，在TDialog的create方法之前連綴setOnBindViewListener即可。
如果要在彈窗消失時進行一些操作，在TDialog的create方法之前連綴setOnDismissListener即可。程式碼如下：
new TDialog.Builder(getSupportFragmentManager())
.setLayoutRes(R.layout.dialog) //設定彈窗展示的xml佈局
.setScreenWidthAspect(MainActivity.this, 0.8f) //設定彈窗寬度(引數aspect為螢幕寬度比例 0 - 1f)
.setScreenHeightAspect(MainActivity.this, 0.3f) //設定彈窗高度(引數aspect為螢幕寬度比例 0 - 1f)
.setOnBindViewListener(new OnBindViewListener() {
@Override
public void bindView(BindViewHolder viewHolder) {
TextView text = viewHolder.getView(R.id.text);
text.setText("初始化");
}
})
.setOnDismissListener(new DialogInterface.OnDismissListener() {
@Override
public void onDismiss(DialogInterface dialog) {
Toast.makeText(MainActivity.this, "cancel", Toast.LENGTH_SHORT).show();
}
})
.addOnClickListener(R.id.ok,R.id.cancel)
.setOnViewClickListener(new OnViewClickListener() {
@Override
public void onViewClick(BindViewHolder viewHolder, View view, TDialog tDialog) {
switch (view.getId()){
case R.id.ok:
viewHolder.setText(R.id.text,"點選了ok");
break;
case R.id.cancel:
tDialog.dismiss();
break;
}
}
})
.create() //建立TDialog
.show(); //展示MainActivity的佈局只有一個button，很簡單，這裡就不貼布局程式碼了，看一下MainActivity的完整程式碼：
package com.cpx.tdialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
import com.timmy.tdialog.TDialog;
import com.timmy.tdialog.base.BindViewHolder;
import com.timmy.tdialog.listener.OnBindViewListener;
import com.timmy.tdialog.listener.OnViewClickListener;
public class MainActivity extends AppCompatActivity {
Button btn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btn = findViewById(R.id.btn);
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
new TDialog.Builder(getSupportFragmentManager())
.setLayoutRes(R.layout.dialog) //設定彈窗展示的xml佈局
.setScreenWidthAspect(MainActivity.this, 0.8f) //設定彈窗寬度(引數aspect為螢幕寬度比例 0 - 1f)
.setScreenHeightAspect(MainActivity.this, 0.3f) //設定彈窗高度(引數aspect為螢幕寬度比例 0 - 1f)
.setOnBindViewListener(new OnBindViewListener() {
@Override
public void bindView(BindViewHolder viewHolder) {
TextView text = viewHolder.getView(R.id.text);
text.setText("初始化");
}
})
.setOnDismissListener(new DialogInterface.OnDismissListener() {
@Override
public void onDismiss(DialogInterface dialog) {
Toast.makeText(MainActivity.this, "cancel", Toast.LENGTH_SHORT).show();
}
})
.addOnClickListener(R.id.ok,R.id.cancel)
.setOnViewClickListener(new OnViewClickListener() {
@Override
public void onViewClick(BindViewHolder viewHolder, View view, TDialog tDialog) {
switch (view.getId()){
case R.id.ok:
viewHolder.setText(R.id.text,"點選了ok");
break;
case R.id.cancel:
tDialog.dismiss();
break;
}
}
})
.create() //建立TDialog
.show(); //展示
}
});
}
}
這樣就實現了文章開始時的效果。
5.設定彈窗動畫，在create之前連綴setDialogAnimationRes即可
.setDialogAnimationRes(R.style.animate_dialog) //設定彈窗動畫後話
如果想用Activity做彈窗，可以檢視另一篇文章：
使用彈窗風格的Activity實現萬能彈窗：
通過Activity實現的Dialog，只需要在啟動Activity時設定：overridePendingTransition(android.R.anim.slide_in_left,android.R.anim.slide_out_right);
即可實現Dialog進出場動畫，非常的方便。