AndroidStudio搭建類微信介面
阿新 • • 發佈：2021-10-10
安卓微信介面設計
一、微信主介面
1）將底部、頂部、中間部分分開設計
2）底部採用LinearLayout（horizontal）巢狀LinearLayout（vertical），設定Layout_width為0dp，Layout_weight為1使得四個控制元件能夠平鋪填滿介面。引用匯入的微信圖示放在drawable檔案中，設定android:scaleType="fitXY"將圖片保持在中心。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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="80dp" android:background="@color/cardview_dark_background" android:baselineAligned="false" android:orientation="horizontal"> <LinearLayout android:id="@+id/bottomView1" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> <ImageButton android:id="@+id/imageButton1" android:layout_width="50dp" android:layout_height="50dp" android:background="@color/cardview_dark_background" android:clickable="false" android:contentDescription="@string/app_name" android:scaleType="fitXY" app:srcCompat="@drawable/dialogue" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_horizontal" android:text="微信" android:textColor="#e6e6e6" android:textSize="24sp" /> </LinearLayout> <LinearLayout android:id="@+id/bottomView2" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> <ImageButton android:id="@+id/imageButton2" android:layout_width="50dp" android:layout_height="50dp" android:background="@color/cardview_dark_background" android:clickable="false" android:contentDescription="@string/app_name" android:scaleType="fitXY" app:srcCompat="@drawable/friend" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="朋友" android:textColor="#e6e6e6" android:textSize="24sp" /> </LinearLayout> <LinearLayout android:id="@+id/bottomView3" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> <ImageButton android:id="@+id/imageButton3" android:layout_width="50dp" android:layout_height="50dp" android:background="@color/cardview_dark_background" android:clickable="false" android:contentDescription="@string/app_name" android:scaleType="fitXY" app:srcCompat="@drawable/mail" /> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="通訊錄" android:textColor="#e6e6e6" android:textSize="24sp" /> </LinearLayout> <LinearLayout android:id="@+id/bottomView4" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> <ImageButton android:id="@+id/imageButton4" android:layout_width="50dp" android:layout_height="50dp" android:background="@color/cardview_dark_background" android:clickable="false" android:contentDescription="@string/app_name" android:scaleType="fitXY" android:src="@drawable/setup" /> <TextView android:id="@+id/textView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_horizontal" android:text="設定" android:textColor="#e6e6e6" android:textSize="24sp" /> </LinearLayout> </LinearLayout>
底部欄介面：
3）頂部程式碼檔案top.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="55dp" android:background="@color/cardview_dark_background"> <TextView android:id="@+id/textView3" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="我的微信" android:textAppearance="@style/TextAppearance.AppCompat.Body1" android:textColor="@color/cardview_light_background" android:textSize="40dp" /> </LinearLayout>
頂部效果展示：
4）整體介面
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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" android:orientation="vertical"> <include layout="@layout/top"/> <FrameLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> <TextView android:id="@+id/textView8" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:textSize="45sp" android:text=" " /> </FrameLayout> <include layout="@layout/bottom1" /> </LinearLayout>
整體效果展示：
5）為了實現四個介面的切換，選擇使用Fragment類：將四個佈局檔案壓縮分別到fragment類裡，成為類的例項物件，將頁面物件化。完成的頁面的檢視層，就要開始完成邏輯層。對於頁面切換，就是監聽圖片按鈕，觸發事件。
5.1 切換頁面
切換頁面可以使用FragmentTransaction,並且在initFragment()函式中使用add()方法將四個切換頁面新增到FrameLayout中，然後通過show()就可以展示對 應的頁面，而hide()可以隱藏相應的頁面。所以這裡可以想到，在show之前呼叫hide隱藏所有被add的頁面，就可以達到切換頁面的效果。
5.2 繫結事件
實現View.OnClickListener介面，implements View.OnClickListener，然後呼叫實現的方法initEvent()，再對相應的元件使用setOnClickListener()方法進行監聽點選事件。
5.3 定義事件
對元件繫結好事件後，就得定義觸發後會執行的事件onClick(View v)。這裡想達到點選後切換頁面，點選圖示變亮，並且其他圖示變灰的效果。
大致思路為：點選後，會從v傳入對應的元件，先獲取元件的id，知道是哪個按鈕，然後將所有圖片變灰，再判斷傳入的id，切換到這個按鈕對應的頁面，並將這個頁面的按鈕變亮。
public class MainActivity extends Activity implements View.OnClickListener { private Fragment mTab01 = new weixinFragment(); private Fragment mTab02 = new frdFragment(); private Fragment mTab03 = new contactFragment(); private Fragment mTab04 = new settingFragment(); private FragmentManager fm; LinearLayout mTabWeixin; LinearLayout mTabFrd; LinearLayout mTabContact; LinearLayout mTabSetting; ImageButton mImgWeixin; ImageButton mImgFrd; ImageButton mImgContact; ImageButton mImgSetting; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉視窗標題 setContentView(R.layout.activity_main); initView(); initFragment(); initEvent(); selectFragment(0); } private void initView() { mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin); mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd); mTabContact = (LinearLayout) findViewById(R.id.id_tab_contact); mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting); mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_img); mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_img); mImgContact = (ImageButton) findViewById(R.id.id_tab_contact_img); mImgSetting = (ImageButton) findViewById(R.id.id_tab_setting_img); } private void initFragment() { fm = getFragmentManager(); FragmentTransaction transaction = fm.beginTransaction(); transaction.add(R.id.id_content, mTab01); transaction.add(R.id.id_content, mTab02); transaction.add(R.id.id_content, mTab03); transaction.add(R.id.id_content, mTab04); transaction.commit(); } private void initEvent() { mTabWeixin.setOnClickListener(this); mTabFrd.setOnClickListener(this); mTabContact.setOnClickListener(this); mTabSetting.setOnClickListener(this); } private void selectFragment(int i) { FragmentTransaction transaction = fm.beginTransaction(); hideFragment(transaction); switch (i) { case 0: transaction.show(mTab01); mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed); break; case 1: transaction.show(mTab02); mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed); break; case 2: transaction.show(mTab03); mImgContact.setImageResource(R.drawable.tab_address_pressed); break; case 3: transaction.show(mTab04); mImgSetting.setImageResource(R.drawable.tab_settings_pressed); break; default: break; } transaction.commit(); } private void hideFragment(FragmentTransaction transaction) { transaction.hide(mTab01); transaction.hide(mTab02); transaction.hide(mTab03); transaction.hide(mTab04); } @Override public void onClick(View v) { resetImgs(); switch (v.getId()) { case R.id.id_tab_weixin: selectFragment(0); break; case R.id.id_tab_frd: selectFragment(1); break; case R.id.id_tab_contact: selectFragment(2); break; case R.id.id_tab_setting: selectFragment(3); break; default: break; } } public void resetImgs() { mImgWeixin.setImageResource(R.drawable.tab_weixin_normal); mImgFrd.setImageResource(R.drawable.tab_find_frd_normal); mImgContact.setImageResource(R.drawable.tab_address_normal); mImgSetting.setImageResource(R.drawable.tab_settings_normal); } }
切換效果：