自定義view__封裝Dialog-分享功能UI的實現
阿新 • • 發佈：2019-02-16
直接上圖看效果
- recyclerView–可以方便的新增多個分享，方便增加修改
- svg–svg可減少使得繪製更快，更流暢
- materialDialog–簡潔大方
因為分享功能可能需要增加或修改，所以使用recyclerView來顯示
看原始碼
item_share.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app tip:這裡使用的是ConstraintLayout佈局，試過你無法使用的的話可改回Linnerlayout或新增下面的程式碼到app的build.gradle中
dependencies {
compile 'com.android.support.constraint:constraint-layout:1.0.2'
}
item的顯示效果
dialog_share.xml 只有一個recyclerView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content">
<View style="@style/lineStyle"
/>
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerViewShare"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v7.widget.RecyclerView>
</LinearLayout>activity_main.xml 這個沒任何用處
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.jian.share.MainActivity">
<android.support.v7.widget.RecyclerView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp" />
</android.support.constraint.ConstraintLayout>
ShareInfo.java 儲存圖示和文字
/**
* Created by jian on 2017/6/10.
*/
public class ShareInfo {
private int imgId;
private String name;
public ShareInfo(int imgId, String name) {
this.imgId = imgId;
this.name = name;
}
public int getImgId() {
return imgId;
}
public void setImgId(int imgId) {
this.imgId = imgId;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
ShareAdapter.java 介面卡
/**
* Created by jian on 2017/6/10.
*/
public class ShareAdapter extends RecyclerView.Adapter<ShareAdapter.MyViewHolder> {
List<ShareInfo> shareInfos;
public ShareAdapter(List<ShareInfo> shareInfos) {
this.shareInfos = shareInfos;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_share, parent, false);
return new MyViewHolder(v);
}
@Override
public void onBindViewHolder(MyViewHolder holder, final int position) {
ShareInfo shareInfo = shareInfos.get(position);
holder.imageView.setImageResource(shareInfo.getImgId());
holder.textView.setText(shareInfo.getName());
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(onShareClickListener!=null){
onShareClickListener.onClick(position);
}
}
});
}
public void setOnShareClickListener(OnShareClickListener onShareClickListener) {
this.onShareClickListener = onShareClickListener;
}
@Override
public int getItemCount() {
return shareInfos.size();
}
private OnShareClickListener onShareClickListener;
public interface OnShareClickListener {
void onClick(int position);
}
class MyViewHolder extends RecyclerView.ViewHolder {
private AppCompatImageView imageView;
private TextView textView;
public MyViewHolder(View itemView) {
super(itemView);
imageView = (AppCompatImageView) itemView.findViewById(R.id.img_share);
textView = (TextView) itemView.findViewById(R.id.tvShare);
}
}
}
ShareDialog.java 這個是主要的程式碼
/**
* Created by jian on 2017/6/10.
*/
public abstract class ShareDialog {
private Context mContext;
public ShareDialog(Context mContext) {
this.mContext = mContext;
initShareInfo();
}
private void initShareInfo() {
ShareInfo shareInfo = new ShareInfo(R.drawable.ic_wechat, "微信");
shareInfos.add(shareInfo);
shareInfo = new ShareInfo(R.drawable.ic_moments, "朋友圈");
shareInfos.add(shareInfo);
shareInfo = new ShareInfo(R.drawable.ic_qq, "QQ");
shareInfos.add(shareInfo);
shareInfo = new ShareInfo(R.drawable.ic_qqkongjian, "空間");
shareInfos.add(shareInfo);
}
private List<ShareInfo> shareInfos = new ArrayList<>();
private View dialogView;
private RecyclerView recyclerView;
AlertDialog.Builder builder;
AlertDialog dialog;
public void showDialog() {
if (dialogView == null) {
//只初始化一次
dialogView = LayoutInflater.from(mContext).inflate(R.layout.dialog_share, null, false);
recyclerView = (RecyclerView) dialogView.findViewById(R.id.recyclerViewShare);
ShareAdapter shareAdapter = new ShareAdapter(shareInfos);
shareAdapter.setOnShareClickListener(new ShareAdapter.OnShareClickListener() {
@Override
public void onClick(int position) {
onShareItemClick(position);
dialog.hide();
}
});
recyclerView.setLayoutManager(new GridLayoutManager(mContext, 3));
recyclerView.setAdapter(shareAdapter);
builder = new AlertDialog.Builder(mContext);
TextView title = new TextView(mContext);
title.setText("分享方式");
title.setPadding(10, 16, 10, 16);//設定title的邊距 left top ,right,bottom
title.setGravity(Gravity.CENTER);//標題居中
// title.setTextColor(getResources().getColor(R.color.greenBG));
title.setTextSize(23);
builder.setCustomTitle(title);
builder.setView(dialogView);
dialog = builder.create();
dialog.show();
}
else{
dialog.show();
}
}
abstract void onShareItemClick(int position);
}
MainActivity 只在這裡呼叫顯示
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ShareDialog shareDialog = new ShareDialog(this) {
@Override
void onShareItemClick(int position) {
//點選的位置
Log.i("onClick", position + "");
}
};
shareDialog.showDialog();//顯示dialog
}
}
好了。基本就這樣，dialog被封裝好後，只需要new一個然後呼叫showDialog（）方法就可顯示分享頁面，同時監聽點選動作
歡迎留言交流