類微信界面的開發 Android studio
最后的完成效果如圖
這是點擊底框四個按鈕之前
點擊聯系人框時，中間的界面發生變化，當前點擊框的顏色和圖示顏色發生變化
此界面的完成需要用到的包括LinearLayout和fragment相配合
首先需要建立一個外圍框架的main.xml檔案，在此界面中，我們使用vertical的LinearLayout作為整個頁面的布局，然后插入頂部的textview以及中間部分的fragment還有底部的一個horizontal的LinearLayout
在底部的LinearLayout里面再創建4個vertical的LinearLayout作為底部四個點擊塊
每一個點擊塊都進行imageview和textview的布局
然后再進行fragment里面的設定
這里我們的底部有四個點擊塊，所以我們需要4個不同的fragment來分別對應每個點擊塊想要呈現的內容，于是新建4個xml
每一個xml里面只需要放置一個textview來表示每一個界面所要表達的意思
此時，有關于布局頁面的作業已經完成啦
接下來需要進行java代碼的作業了
首先每一個fragment的xml都需要一個.java檔案進行插入main.xml
這里展示BlankFragment的代碼
package com.example.mywork_wccyu;
import android.os.Bundle;
import android.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class BlankFragment extends Fragment {
public BlankFragment() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_blank, container, false);
}
}
這里需要注意的是 每個.java檔案里面的類名和建構式名需要與檔案名一致
然后就是主代碼的部分
首先需要將布局頁面的控制元件都進行初始化和分配空間
private Fragment blankFragment=new BlankFragment();
private Fragment blank1Fragment=new Blank1Fragment();
private Fragment blank2Fragment=new Blank2Fragment();
private Fragment blank3Fragment=new Blank3Fragment();
private ImageView imageView,imageView2,imageView3,imageView4;
private FragmentManager fragmentManager;
private LinearLayout LinearLayout1,LinearLayout2,LinearLayout3,LinearLayout4;
然后再將變數與xml里面的實體連起來
LinearLayout1=findViewById(R.id.LinearLayout1);
LinearLayout2=findViewById(R.id.LinearLayout2);
LinearLayout3=findViewById(R.id.LinearLayout3);
LinearLayout4=findViewById(R.id.LinearLayout4);
imageView=findViewById(R.id.imageView);
imageView2=findViewById(R.id.imageView2);
imageView3=findViewById(R.id.imageView3);
imageView4=findViewById(R.id.imageView4);
由于我們需要用到點擊反饋，所以需要繼承AppCompatActivity 也需要implements View.onClickListener
public class MainActivity extends AppCompatActivity implements View.OnClickListener
然后設定4個點擊塊的監聽函式
LinearLayout1.setOnClickListener(this);
LinearLayout2.setOnClickListener(this);
LinearLayout3.setOnClickListener(this);
LinearLayout4.setOnClickListener(this);
接下來還需要進行fragment的初始化
以及當進行點擊時fragment頁面的切換
由于還沒有關于切換的動作
此時的fragment里面是四個fragment的疊加
而我們需要的效果則是點擊哪個點擊塊的時候，與之對應的fragmen界面顯示出來，所以還需要一個將fragment隱藏起來的動作，在點擊時，再將其顯示出來
這里可以將將初始化，隱藏，顯示寫成函式
初始化函式如下
protected void initfragment(){
fragmentManager=getFragmentManager();
FragmentTransaction transaction=fragmentManager.beginTransaction();
transaction.add(R.id.id_content,blankFragment);
transaction.add(R.id.id_content,blank1Fragment);
transaction.add(R.id.id_content,blank2Fragment);
transaction.add(R.id.id_content,blank3Fragment);
transaction.commit();
}
隱藏函式如下
protected void hidefragment(FragmentTransaction transaction){
transaction.hide(blankFragment);
transaction.hide(blank1Fragment);
transaction.hide(blank2Fragment);
transaction.hide(blank3Fragment);
}
顯示函式如下
private void showfragment(int i) {
fragmentManager=getFragmentManager();
FragmentTransaction transaction=fragmentManager.beginTransaction();
hidefragment(transaction);
switch (i){
case 0:
transaction.show(blankFragment);
chbackc(LinearLayout1);
backtoused(LinearLayout2);
backtoused(LinearLayout3);
backtoused(LinearLayout4);
break;
case 1:
transaction.show(blank1Fragment);
chbackc(LinearLayout2);
backtoused(LinearLayout1);
backtoused(LinearLayout3);
backtoused(LinearLayout4);
break;
case 2:
transaction.show(blank2Fragment);
chbackc(LinearLayout3);
backtoused(LinearLayout2);
backtoused(LinearLayout1);
backtoused(LinearLayout4);
break;
case 3:
transaction.show(blank3Fragment);
chbackc(LinearLayout4);
backtoused(LinearLayout2);
backtoused(LinearLayout3);
backtoused(LinearLayout1);
break;
default:
break;
}
transaction.commit();
}
在顯示函式中的chbackc和backtoused兩個函式，這兩個函式是用于改變點擊塊背景顏色和圖示顏色
private void chbackc(View view){
switch(view.getId()){
case R.id.LinearLayout1:
LinearLayout1.setBackgroundColor(0xFFFFFF00);
imageView.setColorFilter(Color.WHITE);
break;
case R.id.LinearLayout2:
LinearLayout2.setBackgroundColor(0xFFFFFF00);
imageView2.setColorFilter(Color.WHITE);
break;
case R.id.LinearLayout3:
LinearLayout3.setBackgroundColor(0xFFFFFF00);
imageView3.setColorFilter(Color.WHITE);
break;
case R.id.LinearLayout4:
LinearLayout4.setBackgroundColor(0xFFFFFF00);
imageView4.setColorFilter(Color.WHITE);
break;
default:
break;
}
}
private void backtoused(View view){
switch(view.getId()){
case R.id.LinearLayout1:
LinearLayout1.setBackgroundColor(0xFF00FF00);
imageView.setColorFilter(0xFF03DAC5);
break;
case R.id.LinearLayout2:
LinearLayout2.setBackgroundColor(0xFF00FF00);
imageView2.setColorFilter(0xFF03DAC5);
break;
case R.id.LinearLayout3:
LinearLayout3.setBackgroundColor(0xFF00FF00);
imageView3.setColorFilter(0xFF03DAC5);
break;
case R.id.LinearLayout4:
LinearLayout4.setBackgroundColor(0xFF00FF00);
imageView4.setColorFilter(0xFF03DAC5);
break;
default:
break;
}
}
代碼倉庫地址：https://github.com/greychan-soko/work1
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/306453.html
標籤：其他