Andriod Studio做类微信界面设计

该博客介绍了一位开发者如何使用Android Studio设计一个类似微信的界面,包括顶部和底部导航栏。内容涵盖了XML布局文件的编写,分别展示了顶部和底部的LinearLayout设计,以及如何通过点击底部按钮切换四个不同的Tab界面。每个Tab界面由一个Fragment表示,通过MainActivity中的FragmentTransaction管理。博主详细解释了如何初始化Fragment,设置点击监听,并在点击事件中根据传入的索引值切换Tab并更新界面样式。此外,还提供了GitHub代码仓库链接供读者参考。

实验内容

通过所学的内容,运用VS设计一个类似于微信的界面,并且完成编写,要求有四个tab界面的切换。

项目效果展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

项目代码

项目代码目录

这是整个项目的文件目录,我们主要编写的就是上面的5个class文件和下面的7个xml文件

界面布局文件

top

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/black"
        android:gravity="center"
        android:text="微信"
        android:textColor="@color/white"
        android:textSize="40sp" />
</LinearLayout>

bottom

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:background="@color/black"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/td_tab_weixin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:onClick="onClick"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            app:srcCompat="@drawable/tab_weixin_pressed" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="消息"
            android:textColor="@color/white" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/td_tab_friend"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:onClick="onClick"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/tab_find_frd_normal" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="好友"
            android:textColor="@color/white" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/td_tab_txl"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:onClick="onClick"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clickable="false"
            app:srcCompat="@drawable/tab_address_normal" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="通讯录"
            android:textColor="@color/white" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/td_tab_setting"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:onClick="onClick"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clickable="false"
            app:srcCompat="@drawable/tab_settings_normal" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="设置"
            android:textColor="@color/white" />
    </LinearLayout>
</LinearLayout>
  • bottom的设计相对于top要复杂一些,因为需要通过点击bottom里面的button来分别展示四个tab界面,所以需要4个LinearLayout(这里可以只写一个,然后cv再修改一些属性就可以了)。
  • 在每一个LinearLayout里面有两个控件,ImageView和TextView,其中ImageView用来放图片并且可以点击它来触发onclick事件,显示其对应的页面;TextView用简单的词来解释这个ImageView的作用。
  • android:id="@+id/td_tab_setting" 设置控件的id
  • android:layout_width=“match_parent”
    android:layout_height=“match_parent”
    android:layout_weight=“1” 分别用来设置宽度,高度和权重
  • android:onClick=“onClick” 设置onClick事件
  • android:orientation=“vertical” 设置排列方式,这里是垂直排列
  • android:gravity=“center” 设置控件位置,这里设置的是居中

四个tab界面

这里我以tab01为例,另外3个tab与tab01类似

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".weixinFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="消息界面"
        android:textSize="100dp"
        android:textColor="@color/black"
        />
</FrameLayout>

class文件代码

Fragment

项目中5个class文件除了MainActivity文件以外,另外4个分别对应于上面4个tab,来展示四个界面,因此需要四个Fragment

  • 以第一个Fragment为例
package com.example.lh;

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class weixinFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.tab01, container, false);
    }
}

创建好Fragment类文件后,删掉多余的内容,只保留onCreateView函数

MainActivity

  • 这个文件在新建项目的时候会自动生成,不用自己创建,之前我不小心把这个文件删掉了,然后我自己又写了一个跟它一样的MainActivity文件,但是发现并不行,对比后才发现是配置文件AndroidManifest的部分内容也被删除了(可能是我在删除MainActivity文件的时候它自动删除的),把删掉的内容加上就行了,其实就是需要注册它
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.lh">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.LH">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
  • 此项目的MainActivity文件
package com.example.lh;

import android.os.Bundle;
import android.util.Log;
import android.view.View;

import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.Fragment;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentTransaction;

import android.view.Window;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

   LinearLayout tabweixin;
   LinearLayout tabfriend;
   LinearLayout tabtxl;
   LinearLayout tabsetting;

   FragmentManager fragmentManager;

   ImageView imgweixin;
   ImageView imgfriend;
   ImageView imgtxl;
   ImageView imgsetting;
   
   private Fragment tab01 = new weixinFragment();
   private Fragment tab02 = new frendFragment();
   private Fragment tab03 = new txlFragment();
   private Fragment tab04 = new settingFragment();
   
   @Override
   protected void onCreate(Bundle savedInstanceState) {

       super.onCreate(savedInstanceState);
       requestWindowFeature(Window.FEATURE_NO_TITLE);
       setContentView(R.layout.layout_main);

       tabweixin = findViewById(R.id.td_tab_weixin);
       tabfriend = findViewById(R.id.td_tab_friend);
       tabtxl = findViewById(R.id.td_tab_txl);
       tabsetting = findViewById(R.id.td_tab_setting);

       imgweixin = findViewById(R.id.imageView1);
       imgfriend = findViewById(R.id.imageView2);
       imgtxl = findViewById(R.id.imageView3);
       imgsetting =findViewById(R.id.imageView4);
       
       initFragment();
       
       tabweixin.setOnClickListener(this);
       tabfriend.setOnClickListener(this);
       tabtxl.setOnClickListener(this);
       tabsetting.setOnClickListener(this);

       SelectTab(0);

   }
   @Override
   public void onClick(View view) {
       switch (view.getId()){
           case R.id.td_tab_weixin:
               Log.v("lh","第一个tab被点击1");
               SelectTab(0);
               break;
           case R.id.td_tab_friend:
               Log.v("lh","第二个tab被点击");
               SelectTab(1);
               break;
           case R.id.td_tab_txl:
               Log.v("lh","第三个tab被点击");
               SelectTab(2);
               break;
           case R.id.td_tab_setting:
               Log.v("lh","第四个tab被点击");
               SelectTab(3);
               break;
           default:
               break;
       }
   }

   private void SelectTab(int i) {
       fragmentManager = getSupportFragmentManager();
       FragmentTransaction transaction = fragmentManager.beginTransaction();

       hideImg();
       hideFragment(transaction);
       
       switch (i){
           case 0:
               transaction.show(tab01);
               imgweixin.setImageResource(R.drawable.tab_weixin_pressed);
               break;
           case 1:
               transaction.show(tab02);
               imgfriend.setImageResource(R.drawable.tab_find_frd_pressed);
               break;
           case 2:
               transaction.show(tab03);
               imgtxl.setImageResource(R.drawable.tab_address_pressed);
               break;
           case 3:
               transaction.show(tab04);
               imgsetting.setImageResource(R.drawable.tab_settings_pressed);
               break;
           default:
               break;
       }
       transaction.commit();
   }

   public void initFragment(){
       fragmentManager = getSupportFragmentManager();
       FragmentTransaction transaction = fragmentManager.beginTransaction();
       transaction.add(R.id.content,tab01);
       transaction.add(R.id.content,tab02);
       transaction.add(R.id.content,tab03);
       transaction.add(R.id.content,tab04);
       
       transaction.commit();

   }
   private void hideFragment(FragmentTransaction transaction) {
       transaction.hide(tab01);
       transaction.hide(tab02);
       transaction.hide(tab03);
       transaction.hide(tab04);
   }
   private  void hideImg(){
       imgweixin.setImageResource(R.drawable.tab_weixin_normal);
       imgfriend.setImageResource(R.drawable.tab_find_frd_normal);
       imgtxl.setImageResource(R.drawable.tab_address_normal);
       imgsetting.setImageResource(R.drawable.tab_settings_normal);
   }
}
声明变量
    LinearLayout tabweixin;
    LinearLayout tabfriend;
    LinearLayout tabtxl;
    LinearLayout tabsetting;

    FragmentManager fragmentManager;

    ImageView imgweixin;
    ImageView imgfriend;
    ImageView imgtxl;
    ImageView imgsetting;

    private Fragment tab01 = new weixinFragment();
    private Fragment tab02 = new frendFragment();
    private Fragment tab03 = new txlFragment();
    private Fragment tab04 = new settingFragment();
初始化Fragment
 public void initFragment(){
        fragmentManager = getSupportFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.add(R.id.content,tab01);
        transaction.add(R.id.content,tab02);
        transaction.add(R.id.content,tab03);
        transaction.add(R.id.content,tab04);
        
        transaction.commit();
    }
  • 最后一定要.commit()提交!
根据id找到对应的控件
        tabweixin = findViewById(R.id.td_tab_weixin);
        tabfriend = findViewById(R.id.td_tab_friend);
        tabtxl = findViewById(R.id.td_tab_txl);
        tabsetting = findViewById(R.id.td_tab_setting);

        imgweixin = findViewById(R.id.imageView1);
        imgfriend = findViewById(R.id.imageView2);
        imgtxl = findViewById(R.id.imageView3);
        imgsetting =findViewById(R.id.imageView4);
设置监听
		tabweixin.setOnClickListener(this);
        tabfriend.setOnClickListener(this);
        tabtxl.setOnClickListener(this);
        tabsetting.setOnClickListener(this);
点击事件
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.td_tab_weixin:
                Log.v("lh","第一个tab被点击1");
                SelectTab(0);
                break;
            case R.id.td_tab_friend:
                Log.v("lh","第二个tab被点击");
                SelectTab(1);
                break;
            case R.id.td_tab_txl:
                Log.v("lh","第三个tab被点击");
                SelectTab(2);
                break;
            case R.id.td_tab_setting:
                Log.v("lh","第四个tab被点击");
                SelectTab(3);
                break;
            default:
                break;
        }
    }
根据传的i值选择tab
    private void SelectTab(int i) {
        fragmentManager = getSupportFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();

        hideImg();
        hideFragment(transaction);

        switch (i){
            case 0:
                transaction.show(tab01);
                imgweixin.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                transaction.show(tab02);
                imgfriend.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                transaction.show(tab03);
                imgtxl.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                transaction.show(tab04);
                imgsetting.setImageResource(R.drawable.tab_settings_pressed);
                break;
            default:
                break;
        }
        transaction.commit();
    }
  • 最后一定要.commit()提交!
隐藏fragment和Img
    private void hideFragment(FragmentTransaction transaction) {
        transaction.hide(tab01);
        transaction.hide(tab02);
        transaction.hide(tab03);
        transaction.hide(tab04);
    }
    
    private  void hideImg(){
        imgweixin.setImageResource(R.drawable.tab_weixin_normal);
        imgfriend.setImageResource(R.drawable.tab_find_frd_normal);
        imgtxl.setImageResource(R.drawable.tab_address_normal);
        imgsetting.setImageResource(R.drawable.tab_settings_normal);
    }
  • 先是隐藏所有的页面,以及初始化所有的ImgView,将所有的ImgView图片源设置为暗色的,然后点击哪一个ImgView就将哪一个的图片源换成亮色图片,并且显示对应的页面。

GitHub代码仓库地址

点击进入本项目GitHub代码仓库

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值