類微信介面設計
2020-10-16 12:00:51
類微信介面設計 v1.0
一、程式執行效果及介面
程式的介面包括上邊框、下邊框和中間的內容，上邊框顯示軟體名「微信」，下邊框內有四個部分，分別為「訊息」、「好友」、「通訊錄」和「設定」，四個部分可以隨意點選，點選不同的部分中間的內容也會隨之變化。
二、實現程式碼
1.xml檔案介面設計
建立top.xml檔案，製作頂部的邊框。邊框的寬度選擇65dp，背景顏色選擇"#000000"（純黑），center居中，使用一個TextView來顯示文字「微信」，字型大小為30sp，顏色選擇"#ffffff"（純白）
<?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="65dp"
android:gravity="center"
android:background="#000000"
android:orientation="vertical">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="微信"
android:textColor="#ffffff"
android:textSize="30sp" />
</LinearLayout>
建立bottom.xml檔案，製作底部的部分。寬度選擇100dp，背景選擇事先準備好的圖片檔案「bottom_bar.9.png」，使用LinearLayout（選擇垂直樣式vertical）；在LinearLayout中建立圖片按鈕控制元件ImageButton和文字控制元件TextView，圖片選擇事先準備好的相應圖示，TextView中文字對應圖示，例如訊息（其他三個同理，併為每一個LinearLayout、ImageButton和TextView取好相應的id）：
<?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"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="@drawable/bottom_bar"
android:orientation="horizontal"
android:baselineAligned="false">
<LinearLayout
android:id="@+id/id_tab_news"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_news_img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="false"
android:background="#000000"
android:contentDescription="@string/app_name"
app:srcCompat="@drawable/tab_weixin_pressed" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text=" 訊息"
android:clickable="false"
android:textColor="#ffffff"
android:textSize="30sp" />
</LinearLayout>
</LinearLayout>
建立tab01.xml、tab02.xml、tab03.xml、tab04.xml檔案，分別製作中間的四個不同介面。由於這四個介面都只有一行文字，因此只需分別使用一個TextView，「bold」加粗字型，例如tab01：
<?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="match_parent"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="這是微信聊天介面"
android:textSize="30sp"
android:textStyle="bold" />
</LinearLayout>
最後activity_main.xml檔案中，將剛剛的top和bottom加入進來，top在最上面，中間用FrameLayout留出空白，bottom在最下面：
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/top"></include>
<FrameLayout
android:id="@+id/id_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<include layout="@layout/bottom"></include>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
2.class類檔案控制
建立四個Fragment，將剛剛建立的四個tab頁面通過Fragment傳遞到主類，例如newsFragment返回tab01：
package com.example.mywechat;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;
/**
* A simple {@link Fragment} subclass.
*/
public class newsFragment extends Fragment {
public newsFragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.tab01, container, false);
}
}
3.主類
相應模組以及變數宣告：
package com.example.mywechat;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import androidx.appcompat.app.AppCompatActivity;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private LinearLayout mTabweixin;
private LinearLayout mTabfriend;
private LinearLayout mTabaddress;
private LinearLayout mTabsetting;
private ImageButton mImgweixin;
private ImageButton mImgfriend;
private ImageButton mImgaddress;
private ImageButton mImgsetting;
private final Fragment mTab01=new newsFragment();//將Tab01傳遞給fragment型別的變數mTab01
private final Fragment mTab02=new friendFragment();
private final Fragment mTab03=new addressFragment();
private final Fragment mTab04=new settingFragment();
private FragmentManager fragmentManager;
調整頁面的顯示，requestWindowFeature去掉介面上多餘的部分，呼叫四個相關的功能函數：
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
initEvent();
initFragment();
setSelect(0);
}
initView( )將bottom中設計的四個部分中的圖示和文字繫結，讓使用者不管是點選圖示還是點選文字都能跳轉到相應頁面
private void initView(){
mTabweixin=(LinearLayout)findViewById(R.id.id_tab_news);
mTabfriend=(LinearLayout)findViewById(R.id.id_tab_friend);
mTabaddress=(LinearLayout)findViewById(R.id.id_tab_address);
mTabsetting=(LinearLayout)findViewById(R.id.id_tab_setting);
mImgweixin=(ImageButton)findViewById(R.id.id_tab_news_img);
mImgfriend=(ImageButton)findViewById(R.id.id_tab_friend_img);
mImgaddress=(ImageButton)findViewById(R.id.id_tab_address_img);
mImgsetting=(ImageButton)findViewById(R.id.id_tab_setting_img);
}
initEvent( )控制監聽範圍，只監聽螢幕下方四個部分的點選行為
private void initEvent(){
mTabweixin.setOnClickListener(this);
mTabfriend.setOnClickListener(this);
mTabaddress.setOnClickListener(this);
mTabsetting.setOnClickListener(this);
}
initFragment( )將Fragment初始化，將四個Fragment放入id_content
private void initFragment(){
fragmentManager=getSupportFragmentManager();
FragmentTransaction transaction=fragmentManager.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();
}
將訊息、好友、通訊錄和設定四個模組分別標號0、1、2、3，setSelect(int i)在收到 i 的值為0時，顯示mTab01介面，並且將圖示改成tab_news_pressed（圖示未點選時是灰色，點選後是綠色），同理，當 i 的值為1、2、3時，也會做相應的改變：
private void setSelect(int i){
FragmentTransaction transaction =fragmentManager.beginTransaction();
hideFragment(transaction);
switch (i){
case 0:
transaction.show(mTab01);
mImgweixin.setImageResource(R.drawable.tab_news_pressed);
break;
case 1:
transaction.show(mTab02);
mImgfriend.setImageResource(R.drawable.tab_friend_pressed);
break;
case 2:
transaction.show(mTab03);
mImgaddress.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
transaction.show(mTab04);
mImgsetting.setImageResource(R.drawable.tab_settings_pressed);
break;
default:
break;
}
transaction.commit();
}
hideFragment( )在顯示一個tab介面時，將其他幾個介面隱藏起來
private void hideFragment(FragmentTransaction transaction){
transaction.hide(mTab01);
transaction.hide(mTab02);
transaction.hide(mTab03);
transaction.hide(mTab04);
}
onClick( )對使用者的行為傳遞不同的引數，當使用者點選訊息部分時，將 0 傳遞給setSelect( )，其他部分同以此類推：
@SuppressLint("NonConstantResourceId")
@Override
public void onClick(View v) {
resetImgs();
switch(v.getId()){
case R.id.id_tab_news:
setSelect(0);
break;
case R.id.id_tab_friend:
setSelect(1);
break;
case R.id.id_tab_address:
setSelect(2);
break;
case R.id.id_tab_setting:
setSelect(3);
break;
default:
break;
}
}
點選其他圖示後，將之前的圖示變為灰色
private void resetImgs(){
mImgweixin.setImageResource(R.drawable.tab_news_normal);
mImgfriend.setImageResource(R.drawable.tab_friend_normal);
mImgaddress.setImageResource(R.drawable.tab_address_normal);
mImgsetting.setImageResource(R.drawable.tab_settings_normal);
}
}