Android實現微信右側頂部下拉對話框

2019-10-21 21:32:09

字體：大中小

來源：轉載

供稿：網友

我們使用微信都知道，其右側頂部有一個下拉對話框，我們可以執行添加好友，掃一掃等功能，今天我們就來模仿實現一下這個功能（實現的方式有很多種，我今天只說一種借助透明主題Activity的方式實現；如果有興趣還可以移步至仿淘寶底部導航欄）；本篇的實現的效果如下：

Android,微信,下拉,對話框

下面就來說一說實現的思路（重要）：

第一步：創建彈出對話框布局

<?xml version="1.0" encoding="UTF-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" >  <RelativeLayout  android:layout_width="fill_parent"  android:layout_height="fill_parent"  android:layout_marginTop="45dp"  android:layout_marginRight="20dp">   <LinearLayout   android:id="@+id/id_pop_dialog_layout"   android:layout_width="@dimen/pop_list_width"   android:layout_height="wrap_content"   android:layout_alignParentRight="true"   android:layout_alignParentTop="true"   android:background="@drawable/pop_item_normal"   android:orientation="vertical" >    <LinearLayout    android:id="@+id/upload_record_layout"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:layout_marginLeft="5dp"    android:layout_marginRight="5dp"    android:layout_marginTop="5dp"    android:background="@drawable/pop_list_selector" >     <ImageView     android:id="@+id/id_imageView1"     android:layout_width="@dimen/pop_dialog_icon_size"     android:layout_height="@dimen/pop_dialog_icon_size"     android:layout_gravity="center_vertical"     android:layout_marginLeft="8dp"     android:src="@drawable/upload_icon_record" />     <TextView     android:layout_width="@dimen/pop_list_width"     android:layout_height="wrap_content"     android:padding="8dp"     android:text="@string/uploadRecord"      android:layout_gravity="center_vertical"     android:textColor="#fff"     android:textSize="16sp" />   </LinearLayout>    <ImageView    android:id="@+id/id_imageView5"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:src="@drawable/pop_line" />    <LinearLayout    android:id="@+id/register_record_layout"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:layout_marginLeft="5dp"    android:layout_marginRight="5dp"    android:background="@drawable/pop_list_selector" >     <ImageView     android:id="@+id/id_imageView2"     android:layout_width="@dimen/pop_dialog_icon_size"     android:layout_height="@dimen/pop_dialog_icon_size"     android:layout_gravity="center_vertical"     android:layout_marginLeft="8dp"     android:src="@drawable/register_icon_record" />     <TextView     android:layout_width="@dimen/pop_list_width"     android:layout_height="wrap_content"     android:padding="8dp"     android:text="@string/registerRecord"      android:layout_gravity="center_vertical"     android:textColor="#fff"     android:textSize="16sp" />   </LinearLayout>    <ImageView    android:id="@+id/id_imageView7"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:src="@drawable/pop_line" />    <LinearLayout    android:id="@+id/new_massage_layout"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:layout_marginLeft="5dp"    android:layout_marginRight="5dp"    android:background="@drawable/pop_list_selector" >     <ImageView     android:id="@+id/id_imageView3"     android:layout_width="@dimen/pop_dialog_icon_size"     android:layout_height="@dimen/pop_dialog_icon_size"     android:layout_gravity="center_vertical"     android:layout_marginLeft="8dp"     android:src="@drawable/message_icon_tip" />     <TextView     android:id="@+id/new_message"     android:layout_width="@dimen/pop_list_width"     android:layout_height="wrap_content"     android:padding="8dp"     android:text="@string/defaultMessage"     android:layout_gravity="center_vertical"     android:textColor="#fff"     android:textSize="16sp" />   </LinearLayout>    <ImageView    android:id="@+id/id_imageView6"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:src="@drawable/pop_line" />   </LinearLayout> </RelativeLayout> </RelativeLayout>

第二步：創建一個用于顯示該對話框布局Activity

package com.hfut.popdialogtest; import android.app.Activity;import android.os.Bundle;import android.view.MotionEvent;import android.view.View;import android.view.View.OnClickListener;import android.view.Window;import android.widget.LinearLayout; /** * @author why * @date 2018-10-3 */public class MyDialogActivity extends Activity implements OnClickListener{  private LinearLayout uploadRecord; private LinearLayout registerRecord; private LinearLayout newMessage;  @Override protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  requestWindowFeature(Window.FEATURE_NO_TITLE);  setContentView(R.layout.pop_dialog);   if(getActionBar()!=null){   getActionBar().hide();  }  CommonTools.setNavbarVisibility(this);  initView(); }   private void initView(){  uploadRecord = findViewById(R.id.upload_record_layout);  registerRecord = findViewById(R.id.register_record_layout);  newMessage = findViewById(R.id.new_massage_layout);   uploadRecord.setOnClickListener(this);  registerRecord.setOnClickListener(this);  newMessage.setOnClickListener(this); }  @Override public boolean onTouchEvent(MotionEvent event){  finish();  return true; }  @Override public void onClick(View v) {  switch (v.getId()){   case R.id.upload_record_layout:   SharedData.resultID=1;   break;   case R.id.register_record_layout:   SharedData.resultID=2;   break;   case R.id.new_massage_layout:   SharedData.resultID=3;   break;   default:   SharedData.resultID=0;   break;  }  this.finish(); }}

第三步：創建一個主界面
MainActivity.java代碼：

package com.hfut.popdialogtest; import android.content.Intent;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.TextView; /** * @author why * @date 2018-10-3 9:35:35 */public class MainActivity extends AppCompatActivity {  TextView resultShow;  @Override protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);  resultShow = findViewById(R.id.show_choosen_result);   if(getActionBar()!=null){   getActionBar().hide();  }  CommonTools.setNavbarVisibility(this); }   @Override protected void onResume() {  switch (SharedData.resultID) {   case 0:    resultShow.setText("默認顯示");    break;   case 1:    resultShow.setText(getResources().getString(R.string.uploadRecord));    break;   case 2:    resultShow.setText(getResources().getString(R.string.registerRecord));    break;   case 3:    resultShow.setText(getResources().getString(R.string.defaultMessage));    break;   default:    resultShow.setText("默認顯示");    break;   }  super.onResume(); }  public void openPopDialog(View view) {  Intent intent = new Intent(this, PopDialogActivity.class);  startActivity(intent); }}

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.hfut.popdialogtest.MainActivity">  <ImageView  android:onClick="openPopDialog"  android:id="@+id/pop_dialog_icon"  app:layout_constraintRight_toRightOf="parent"  android:layout_marginRight="10dp"  app:layout_constraintTop_toTopOf="parent"  android:layout_marginTop="5dp"  android:background="@drawable/message_tip"  android:layout_width="50dp"  android:layout_height="50dp" />  <TextView  android:gravity="center"  android:textColor="@color/colorAccent"  android:textSize="30sp"  android:id="@+id/show_choosen_result"  app:layout_constraintTop_toBottomOf="@id/pop_dialog_icon"  android:layout_marginTop="50dp"  android:layout_width="match_parent"  android:layout_height="match_parent" /> </android.support.constraint.ConstraintLayout>

第四步：設置對話框Activity主題為透明主題
AndroidManifest.xml文件代碼：

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.hfut.popdialogtest">  <application  android:allowBackup="true"  android:icon="@mipmap/ic_launcher"  android:label="@string/app_name"  android:roundIcon="@mipmap/ic_launcher_round"  android:supportsRtl="true"  android:theme="@style/AppTheme">  <activity android:name=".MainActivity">   <intent-filter>    <action android:name="android.intent.action.MAIN" />     <category android:name="android.intent.category.LAUNCHER" />   </intent-filter>  </activity>  <activity android:name=".MyDialogActivity" android:theme="@android:style/Theme.Translucent" /> </application> </manifest>

第五步：其他輔助代碼
CommonTools.java代碼：

package com.hfut.popdialogtest; import android.app.Activity;import android.view.View; /** * author:why * created on: 2018/9/11 13:34 * description: */public class CommonTools {  /**  * to controll the visibility of the Activity's navigator bar  * @param activity  */ public static void setNavbarVisibility(Activity activity) {  View decorView = activity.getWindow().getDecorView();  decorView.setSystemUiVisibility(    View.SYSTEM_UI_FLAG_LAYOUT_STABLE      | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION      | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN      | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION      | View.SYSTEM_UI_FLAG_FULLSCREEN      | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY); } }

Values目錄下的dimens.xml代碼：

<?xml version="1.0" encoding="utf-8"?><resources> <dimen name="pop_list_width">160dp</dimen> <dimen name="pop_dialog_icon_size">60dp</dimen> <dimen name="pop_dialog_icon_tip_size">40dp</dimen></resources>

Values目錄下的strings.xml代碼：

<resources> <string name="app_name">仿微信右側頂部下拉彈出測試</string>  <string name="uploadRecord">上傳記錄</string> <string name="registerRecord">注冊記錄</string> <string name="defaultMessage">消息提示</string> </resources>

其他資源文件就不添加了。我們總結一下其實就是這樣的步驟：