目錄
APP界面效果展示：
實作程序：
一、基本框架實作：
1.頂部top.xml：
2.底部bottom.xml：
3.總框架activity_main.xml：
二、點擊切換動作的實作：
1.fragmentManager標準化
2.tag頁面的顯示、隱藏、點擊切換
三、對外觀結構的調整
1.點擊切換圖示和文本顏色
2.APP初始界面優化
結語
專案源代碼地址：
本次作業的內容為：根據課程實操實作APP門戶界面框架設計，至少包含4個tab頁，能實作tab頁之間的點擊切換；
技術：使用布局（layouts）和分段（fragment），對控制元件進行點擊監聽，
APP界面效果展示：
實作程序：
注：所有定義以及相關賦值可在文章最后查看專案原始碼或點此鏈接查看（包括文中提到的onCreate函式），
一、基本框架實作：
觀察APP實作后的效果圖，可見基本框架可分為三個部分：頂部title，中部的FrameLayout，底部的四個點擊切換動作，
可知需要七個layout檔案才能將完整的界面顯示，分別為：頂部，底部，中部四個tag，以及一個總框架，中部四個tag會在后面點擊切換部分展示，這里先看其他三個部分，可按以下順序依次實作，
1.頂部top.xml：
頂部較為簡單，只需一個TextView即可，最外層為一個水平的LinearLayout布局，
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="@color/black"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_weight="1"
android:gravity="center"
android:text="Wangkai Wechat"
android:textColor="@color/white"
android:textSize="30sp" />
</LinearLayout>2.底部bottom.xml：
底部四個點擊切換動作每個都需要一個ImageView和一個TextView，并且兩個控制元件要被包含在同一個LinearLayout之中，最后四個LinearLayout的外層使用水平的LinearLayout布局，以下為其中一個LinearLayout的代碼（其余三個替換圖片和文字即可）：
<LinearLayout
android:id="@+id/LinearLayout_wechat"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="@drawable/wechat2" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="微信"
android:textColor="@color/white"
android:textSize="25sp" />
</LinearLayout>3.總框架activity_main.xml：
再創建一個Layout檔案，使用垂直布局的LinearLayout，添加一個FrameLayout，設定其height=“0dp”、weight=“1”；將top和bottom的布局include進來，并放在FrameLayout的上下兩邊，這樣基本的界面框架就做了出來，
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<include layout="@layout/top" />
<FrameLayout
android:id="@+id/id_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<include layout="@layout/bottom" />
</LinearLayout>基本框架效果圖：
二、點擊切換動作的實作：
要想實作點擊切換的效果，需要設定一個FragmentManager來對四個不同的tab進行控制，讓他們疊加在一起的同時，實作在不同的點擊動作發生時進行一個tab的顯示及其余三個的隱藏，
1.fragmentManager標準化
首先定義一個FragmentManager的變數并寫一個函式進行fragmentManager的標準化：
private FragmentManager fragmentManager;
private void initFragment(){
fragmentManager=getFragmentManager();
FragmentTransaction transaction=fragmentManager.beginTransaction(); //開始互動控制
transaction.add(R.id.id_content,wechatFragment); //把fragment加入到id_content
transaction.add(R.id.id_content,friendFragment);
transaction.add(R.id.id_content,contactFragment);
transaction.add(R.id.id_content,configFragment);
transaction.commit();
}這里的transaction.add()函式的引數需要一個int型別和一個fragment型別，意為將把fragment加入到一個FrameLayout里，int值為FrameLayout的id，
根據本界面的框架，可知需要4個這樣的fragment，那么就需要創建四個這樣的Fragment類，比如第一個微信界面的類可以這樣寫：
package com.example.mywork;
import android.os.Bundle;
import android.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class wechatFragment extends Fragment {
public wechatFragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
// 壓縮器，把xml檔案壓縮到容器中
return inflater.inflate(R.layout.fragment_wechat, container, false);
}
}這里用到了Inflater，可以將xml檔案壓縮到容器中，第一個引數就是一個Layout引數，前面講了，我們需要四個tag頁面，也就是四個Layout來實作中間部分，我們需要將四個fragment做出對應的Layout頁面，這是上面微信界面fragment的Layout：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".wechatFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="這是微信聊天界面"
android:textSize="30dp"
android:gravity="center"/>
</LinearLayout>在寫完這些后，由于Java自導包的問題會導致報錯，只需將import的包中與Fragment、FragmentManager、FragmentTransaction相關的包改為以下內容即可修復：
import android.app.Fragment; import android.app.FragmentManager; import android.app.FragmentTransaction;
將四個fragment和Layout寫好之后，fragmentManager標準化也完成了，接下來就需要實作四個tag頁面的顯示、隱藏，以及點擊動作的實作，
2.tag頁面的顯示、隱藏、點擊切換
tag的顯示與隱藏較好實作，使用函式即可（在show之前隱藏其他tag頁面，這樣就可做到點哪一個只顯示哪一個，其余隱藏）：
//tag頁面的隱藏
private void hideFragment(FragmentTransaction transaction){
transaction.hide(wechatFragment);
transaction.hide(friendFragment);
transaction.hide(contactFragment);
transaction.hide(configFragment);
}
//tag頁面的顯示
private void showfragment(int i) {
FragmentTransaction transaction=fragmentManager.beginTransaction();
hideFragment(transaction);
switch (i){
case 0:
transaction.show(wechatFragment);
break;
case 1:
transaction.show(friendFragment);
break;
case 2:
transaction.show(contactFragment);
break;
case 3:
transaction.show(configFragment);
break;
default:
break;
}
transaction.commit();
}現在只差對控制元件的點擊監聽了，各個LinearLayout的監聽放在了onCreate函式中，這里用到了Onclick()，使用switch陳述句即可實作通過點擊獲得不同Layout的id來顯示不同tag頁面，如下：
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.LinearLayout_wechat:
showfragment(0);
break;
case R.id.LinearLayout_friend:
showfragment(1);
break;
case R.id.LinearLayout_contact:
showfragment(2);
break;
case R.id.LinearLayout_config:
showfragment(3);
break;
default:
break;
}
}要注意的是，使用了Onclick()會有報錯的情況，需要將主函式的函式頭更改：
public class MainActivity extends AppCompatActivity{}
改為：
public class MainActivity extends AppCompatActivity implements View.OnClickListener{}
做完這些，已經基本實作了此APP的功能，接下來做的就是對界面外觀的一些調整了，
三、對外觀結構的調整
1.點擊切換圖示和文本顏色
運行程式會發現，沒有細節的處理會讓使用起來很不舒服，在我們使用的微信中，點擊切換時會發現底部的圖示和字體顏色是會改變的，我這里使用的方法是找到下面四個圖示的另一組不同顏色的圖，如下圖所示：
寫一個函式，使用imageView.setImageResource和textView.setTextColor先把圖片設定為灰色的并把文本設定為白色，然后再通過點擊動作傳入一個Layout的id選擇相應的Layout進行圖片的改變以及文本顏色設定（imageView1/2/3/4，textView1/2/3/4定義在onCreate中）：
private void changeColor(int i){
imageView1.setImageResource(R.drawable.wechat2);
imageView2.setImageResource(R.drawable.friend2);
imageView3.setImageResource(R.drawable.contact2);
imageView4.setImageResource(R.drawable.config2);
textView1.setTextColor(Color.rgb(255, 255, 255));
textView2.setTextColor(Color.rgb(255, 255, 255));
textView3.setTextColor(Color.rgb(255, 255, 255));
textView4.setTextColor(Color.rgb(255, 255, 255));
switch (i){
case 0:
imageView1.setImageResource(R.drawable.wechat1);
textView1.setTextColor(Color.rgb(26,250,41));
break;
case 1:
imageView2.setImageResource(R.drawable.friend1);
textView2.setTextColor(Color.rgb(26,250,41));
break;
case 2:
imageView3.setImageResource(R.drawable.contact1);
textView3.setTextColor(Color.rgb(26,250,41));
break;
case 3:
imageView4.setImageResource(R.drawable.config1);
textView4.setTextColor(Color.rgb(26,250,41));
break;
default:
break;
}
}這樣的話，Onclick()也需要加上這個點擊顏色變化的函式，即：
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.LinearLayout_wechat:
changeColor(0);
showfragment(0);
break;
case R.id.LinearLayout_friend:
changeColor(1);
showfragment(1);
break;
case R.id.LinearLayout_contact:
changeColor(2);
showfragment(2);
break;
case R.id.LinearLayout_config:
changeColor(3);
showfragment(3);
break;
default:
break;
}
}這樣就實作了點擊切換圖示和文本的顏色，效果圖見文章開始的效果展示，
2.APP初始界面優化
使用以上的代碼直接運行APP后，不進行任何操作的話中部四個tag頁面會疊加在一起，類似于以下效果：
可以在初始化FragmentManager時，在提交前加上將四個tag隱藏的函式，即可實作APP初始界面為空白頁，或者直接使用changeColor()和showfragment()函式，將其中一個tag顯示：
private void initFragment(){
fragmentManager=getFragmentManager();
FragmentTransaction transaction=fragmentManager.beginTransaction(); //開始互動控制
transaction.add(R.id.id_content,wechatFragment); //把fragment加入到id_content
transaction.add(R.id.id_content,friendFragment);
transaction.add(R.id.id_content,contactFragment);
transaction.add(R.id.id_content,configFragment);
//隱藏4個tag
hideFragment(transaction);
//或者 changeColor(0);showfragment(0); 顯示微信聊天頁面
transaction.commit();
}
結語
本次作業大部分由老師指導完成，確實剛開始需要一段時間的學習，這次自己只獨立完成了后面的外觀結構調整部分，希望以后能自己獨立完成更多內容，
專案源代碼地址：
wk-WeChat: AS移動微信界面 (gitee.com)
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/306014.html
標籤：其他