Android studio 类微信主界面
类微信界面的开发 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