Android仿微信右側頂部下拉對話方塊
阿新 • • 發佈：2018-12-13
我們使用微信都知道，其右側頂部有一個下拉對話方塊，我們可以執行新增好友，掃一掃等功能，今天我們就來模仿實現一下這個功能（實現的方式有很多種，我今天只說一種藉助透明主題Activity的方式實現）；實現的效果如下：
下面就來說一說實現的思路（重要）：
- 第一步：建立彈出對話方塊佈局
<?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>
其他資原始檔就不添加了。我們總結一下其實就是這樣的步驟：
- 點選主Activity的彈窗對話方塊圖示，開啟一個新的透明的Acitivity
- 在新的Activity中做完邏輯處理把結果存放在主Activity可訪問的資料域，然後finish自己
- 主Activity再次可互動，並在onResume中實現對處理結果分析和處理，比如修改主Activity UI；