Android studio 类微信主界面

类微信界面的开发 Android studio
最后的完成效果如图

这是点击底框四个按钮之前
Android studio 类微信主界面_第1张图片
点击联系人框时,中间的界面发生变化,当前点击框的颜色和图标颜色发生变化

Android studio 类微信主界面_第2张图片
Android studio 类微信主界面_第3张图片
Android studio 类微信主界面_第4张图片

此界面的完成需要用到的包括LinearLayout和fragment相配合

首先需要建立一个外围框架的main.xml文件,在此界面中,我们使用vertical的LinearLayout作为整个页面的布局,然后插入顶部的textview以及中间部分的fragment还有底部的一个horizontal的LinearLayout
Android studio 类微信主界面_第5张图片
在底部的LinearLayout里面再创建4个vertical的LinearLayout作为底部四个点击块
每一个点击块都进行imageview和textview的布局
Android studio 类微信主界面_第6张图片
然后再进行fragment里面的设置
这里我们的底部有四个点击块,所以我们需要4个不同的fragment来分别对应每个点击块想要呈现的内容,于是新建4个xml
Android studio 类微信主界面_第7张图片
每一个xml里面只需要放置一个textview来表示每一个界面所要表达的意思
Android studio 类微信主界面_第8张图片
此时,有关于布局页面的工作已经完成啦

接下来需要进行java代码的工作了
首先每一个fragment的xml都需要一个.java文件进行插入main.xml
Android studio 类微信主界面_第9张图片
这里展示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

你可能感兴趣的