Andriod Studio做类微信界面设计
实验内容
通过所学的内容,运用VS设计一个类似于微信的界面,并且完成编写,要求有四个tab界面的切换。
项目效果展示




项目代码
项目代码目录

界面布局文件
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就将哪一个的图片源换成亮色图片,并且显示对应的页面。

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

5692

被折叠的 条评论
为什么被折叠?



