移动开发.Android studio实现类Wechat界面

移动开发.Android studio实现类Wechat界面

移动开发.Android studio实现类Wechat界面

文章目录

    • **1>类Wechat界面有哪些功能**
    • **2>分析如何实现这些功能**
    • **3>bottom.xml的构造**
    • **4>top.xml的构造**
    • **5>activity_main.xml的构造**
    • **6>****MainActivity的构造**
    • **7>调用的四个Fragment文件**
    • 8>Wechat的运行**

文章目录

1>类Wechat界面有哪些功能

1.在界面的下方有四个按钮,微信,朋友,通讯录,设置,按下后按钮会又暗变亮

2.在点击四个按钮后,会跳转到四个不同的界面

3.在界面的上方有一个标题Wechat


2>分析如何实现这些功能

1.首先要准备8个界面图标,将它们放入到drawable中

bottom_bar.png                 weixin1.png          weixin2.png

 

friend1.png                     friend2.png                address1.png

    address2.png                setting1.png             setting2.png

2.在layout的bottom.xml中涉及wechat的底部ui,在底部设置4个按钮,对应四个微信,朋友,通讯录和设置。

3.在top.xml中设计微信的title,黑底白字Wechat

4.在layout的activity_main.xml中,设计中间一层的ui,将一个空Fragement拉进来,并且把top.xml和bottom.xml引入。这样初始的类微信界面就设计好了 。

5.要实现,点击底部图标换颜色和界面的功能,要新建四个java 的Fragment文件,即weixinFragement,FrdFragement,contactFragement和settingFragement,,在主函数中首先声明变量,将部件和java代码连接起来,设计点击图标,图标变量,其余图标为灰色,并改变相应的代码,而这一切都要有一个监听函数,监听鼠标的动态。


3>bottom.xml的构造

在这个Linearlayout中添加textview和imagebutton(选中之前拖入drawable文件夹里的图标),调整为图片在上文本在下

                              移动开发.Android studio实现类Wechat界面_第1张图片

 

调整Linearlayout

调整文本为白色并调整大小

将imagebutton背景调整为黑色并调整宽度为80dp

 
  

然后将这个Linearlayout单元copy三份总共四份,由于四份的Linearlayout名字一样会报错,所以需要修改一下每一份的id,调整四个Linearlayout的参数

此时bottom的基本雏形已经完成

 在这里插入图片描述

 


4>top.xml的构造

拖入一个textview到linearlayout里,修改内容为WeChat,在Code中调整xml文件


​
    

               在这里插入图片描述 

 


5>activity_main.xml的构造

layout中新建一个activity_main.xml文件 将FrameLayout拖入,进入Code编辑代码



    
    
    
    

在其中引入top.xml和bottom.xml.

移动开发.Android studio实现类Wechat界面_第2张图片

 

 


6>**MainActivity的构造**

package com.example.mywork_lbw;
​
import androidx.appcompat.app.AppCompatActivity;
​
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
​
import android.os.Bundle;
import android.util.Log;
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 mTabfrd;
    private LinearLayout mTabAddress;
    private LinearLayout mTabSetting;
​
    private ImageButton mWeixinImg;
    private ImageButton mFrdImg;
    private ImageButton mAddressImg;
    private ImageButton mSettingImg;
​
​
    private Fragment mTab01 = new weixinFragment();
    private Fragment mTab02 = new frdFragment();
    private Fragment mTab03 = new contactFragment();
    private Fragment mTab04 = new settingsFragment();
​
    private FragmentManager fm;
​
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
​
        initView();
        initEvent();
        initFragment();
        selectfragment(0);
    }
​
    private void initFragment() {
        //fragment的切换
        fm = getFragmentManager();
        FragmentTransaction transaction = fm.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();
    }
​
    private void initEvent() {
        mTabWeixin.setOnClickListener(this);
        mTabfrd.setOnClickListener(this);
        mTabAddress.setOnClickListener(this);
        mTabSetting.setOnClickListener(this);
    }
​
    private void initView() {
        //改变图标的颜色
        mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
        mTabfrd = (LinearLayout) findViewById(R.id.id_tab_frd);
        mTabAddress = (LinearLayout) findViewById(R.id.id_tab_contact);
        mTabSetting = (LinearLayout) findViewById(R.id.id_tab_settings);
​
        mWeixinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img);
        mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img);
        mAddressImg = (ImageButton) findViewById(R.id.id_tab_contact_img);
        mSettingImg = (ImageButton) findViewById(R.id.id_tab_settings_img);
​
​
    }
​
    private void selectfragment(int i) {
        //显示选中界面的内容,选中界面图标为绿色
        FragmentTransaction transaction = fm.beginTransaction();
        hideFragment(transaction);
        switch (i) {
            case 0:
                Log.d("setSelect", "1");
                transaction.show(mTab01);
                mWeixinImg.setImageResource(R.drawable.weixin1);
                break;
            case 1:
                transaction.show(mTab02);
                mFrdImg.setImageResource(R.drawable.friend1);
                break;
            case 2:
                transaction.show(mTab03);
                mAddressImg.setImageResource(R.drawable.address1);
                break;
            case 3:
                transaction.show(mTab04);
                mSettingImg.setImageResource(R.drawable.setting1);
                break;
            default:
                break;
        }
        transaction.commit();
    }
​
    private void hideFragment(FragmentTransaction transaction) {
        //把没有使用的界面的内容隐藏
        transaction.hide(mTab01);
        transaction.hide(mTab02);
        transaction.hide(mTab03);
        transaction.hide(mTab04);
    }
​
    @Override
    public void onClick(View view) {
        //监听函数,监听到底是哪一个图标被击中从而显示哪一个界面的内容
        resetimg();
        switch (view.getId()) {
            case R.id.id_tab_weixin:
                selectfragment(0);
                break;
            case R.id.id_tab_frd:
                selectfragment(1);
                break;
            case R.id.id_tab_contact:
                selectfragment(2);
                break;
            case R.id.id_tab_settings:
                selectfragment(3);
                break;
        }
    }
​
    public void resetimg() {
        //没有使用的界面的图标为灰色
        mWeixinImg.setImageResource(R.drawable.weixin2);
        mFrdImg.setImageResource(R.drawable.friend2);
        mAddressImg.setImageResource(R.drawable.address2);
        mSettingImg.setImageResource(R.drawable.setting2);
    }
}
​

这里主要运用了Fragment

Fragment的优势有以下几点:

  1. 模块化(Modularity):我们不必把所有代码全部写在Activity中,而是把代码写在各自的Fragment中。

  2. 可重用(Reusability):多个Activity可以重用一个Fragment。

  3. 可适配(Adaptability):根据硬件的屏幕尺寸、屏幕方向,能够方便地实现不同的布局,这样用户体验更好。

注意:这里的java文件声明变量时并不需要原文件一样的id,可以新建一个id,以免混淆

这里的4个Fragement对应着四个界面,注意要在四个Fragement里面修改最后的return值

 移动开发.Android studio实现类Wechat界面_第3张图片

 


 

7>调用的四个Fragment文件

 private Fragment mTab01 = new weixinFragment();
    private Fragment mTab02 = new frdFragment();
    private Fragment mTab03 = new contactFragment();
    private Fragment mTab04 = new settingsFragment();
    private FragmentManager fm;

8>Wechat的运行**

移动开发.Android studio实现类Wechat界面_第4张图片

 

移动开发.Android studio实现类Wechat界面_第5张图片

 

移动开发.Android studio实现类Wechat界面_第6张图片

 移动开发.Android studio实现类Wechat界面_第7张图片

 

原码下载:

GitHub - yikemi/Wechat_lbw

移动开发.Android studio实现类Wechat界面_第8张图片

 

你可能感兴趣的