如何在Android studio 上开发微信界面，并实现切换效果
文章目录
- 1.思路
- 2.页面制作
- 提示
- 上部分导航栏
- 下部分分区栏
- 中间的展示部分
- 3.最后合并各栏
- 4.最后就是java文件中的MainActicity文件
- 5.可能出现的问题（小结）
1.思路
-
首先，需要明白明白，我们的目的是做微信界面，并实现切换效果，在切换时，对应的图标要变成绿色
-
下面是效果图
-
其中，微信界面，由上部分的导航栏，下部分的分区栏，以及中间的展示栏组成，上部分和下部分是静态的，用LinearLayout控件，中间的展示栏是动态的，由4张页面重叠在一起，我们用FrameLayout控件，我们要做的就是点击下面相应的图标，显示对应的页面。
2.页面制作
提示
这里放一张全局图，用来展示目录和标出一些重点地方
写的还累我凎，这里用到的就是java文件、还有res里面的Layout里的xml页面文件、以及res里面的drawable里的图标，这个里面的图标我在后面做下部分分区栏时会降到。
上部分导航栏
效果：
代码：
<?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="65dp"android:background="#000000"android:gravity="center"android:orientation="vertical"><TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:gravity="center_horizontal"android:text="微信"android:textColor="#ffffff"android:textSize="20sp" />
</LinearLayout>
下部分分区栏
注意：这里需要用到微信的各个图标，这里我推荐iconfont阿里巴巴矢量图标库，里面用微博或者Github登录即可免费下载所需要的的图标。
这里，我们需要下载8张png文件的图标，4张灰色的，4张绿色的。
效果：
代码：
<?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"xmlns:tools="http://schemas.android.com/tools"android:layout_width="wrap_content"android:layout_height="80dp"android:layout_gravity="bottom"android:background="#F1F1F1"tools:context=".bottom"><LinearLayoutandroid:id="@+id/weixin"android:layout_width="270px"android:layout_height="200px"android:gravity="center"android:orientation="vertical"><ImageViewandroid:id="@+id/weixinImg"android:layout_width="100px"android:layout_height="100px"android:src="@drawable/wc"tools:srcCompat="@drawable/wc" /><TextViewandroid:id="@+id/textView2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="微信" /></LinearLayout><LinearLayoutandroid:id="@+id/friend"android:layout_width="270px"android:layout_height="200px"android:gravity="center"android:orientation="vertical"><ImageViewandroid:id="@+id/friendImg"android:layout_width="100px"android:layout_height="100px"android:src="@drawable/cont"tools:srcCompat="@drawable/cont" /><TextViewandroid:id="@+id/textView3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="通讯录" /></LinearLayout><LinearLayoutandroid:id="@+id/contact"android:layout_width="270px"android:layout_height="200px"android:gravity="center"android:orientation="vertical"><ImageViewandroid:id="@+id/contactImg"android:layout_width="100px"android:layout_height="100px"android:src="@drawable/find"tools:srcCompat="@drawable/find" /><TextViewandroid:id="@+id/textView4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="发现" /></LinearLayout><LinearLayoutandroid:id="@+id/setting"android:layout_width="270px"android:layout_height="200px"android:gravity="center"android:orientation="vertical"><ImageViewandroid:id="@+id/settingImg"android:layout_width="100px"android:layout_height="100px"android:src="@drawable/my"tools:srcCompat="@drawable/my" /><TextViewandroid:id="@+id/textView5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="我" /></LinearLayout>
</LinearLayout>
中间的展示部分
这里只展示4张中的一张，剩下的三张以此类推
注意，这里我们用的是系统给的FrameLayout,创建方式如下图：
第一张效果图：
第一张的代码：
<?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=".tab1"><TextViewandroid:id="@+id/textView7"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:gravity="center"android:text="这是微信聊天界面"android:textSize="25dp" />
</FrameLayout>
3.最后合并各栏
效果：
代码：
<?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="match_parent"android:orientation="vertical"><include layout = "@layout/top" /><FrameLayoutandroid:id="@+id/content"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" /><include layout = "@layout/bottom"/></LinearLayout>
4.最后就是java文件中的MainActicity文件
代码部分如下图：
注意，所有的函数都在调用时写了注释，方便理解
package com.example.mywechat;import androidx.appcompat.app.AppCompatActivity;
import android.app.Fragment;
import android.app.FragmentTransaction;
import android.app.FragmentManager;import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;import org.chromium.base.Log;public class MainActivity extends AppCompatActivity implements View.OnClickListener{//开始获取各个控件private LinearLayout weixin;private LinearLayout friend;private LinearLayout contact;private LinearLayout setting;private ImageView weixinImg;private ImageView friendImg;private ImageView contactImg;private ImageView settingImg;private Fragment tab1 = new tab1();private Fragment tab2 = new tab2();private Fragment tab3 = new tab3();private Fragment tab4 = new tab4();private FragmentManager fm;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);supportRequestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);//初始化下部分分区栏，获取到各个栏，为下面的点击事件做准备，获取各个图片控件，为下面点击更换图片做准备initView();//初始化FragmentinitFragment();//为下部分各个栏添加监听器，initEvent();//选择函数，选中下部分的哪个栏，就隐藏FrameLayout中重叠的其他三个栏，并将图标换成绿色的selectFragment(0);}private void initView(){weixin=(LinearLayout)findViewById(R.id.weixin);friend=(LinearLayout)findViewById(R.id.friend);contact=(LinearLayout)findViewById(R.id.contact);setting=(LinearLayout)findViewById(R.id.setting);weixinImg=(ImageView) findViewById(R.id.weixinImg);friendImg=(ImageView) findViewById(R.id.friendImg);contactImg=(ImageView) findViewById(R.id.contactImg);settingImg=(ImageView) findViewById(R.id.settingImg);}private void initFragment(){fm = getFragmentManager();FragmentTransaction transaction=fm.beginTransaction();transaction.add(R.id.content,tab1);transaction.add(R.id.content,tab2);transaction.add(R.id.content,tab3);transaction.add(R.id.content,tab4);transaction.commit();}private void initEvent(){weixin.setOnClickListener((View.OnClickListener) this);friend.setOnClickListener((View.OnClickListener) this);contact.setOnClickListener((View.OnClickListener) this);setting.setOnClickListener((View.OnClickListener) this);}private void selectFragment(int i){FragmentTransaction transaction=fm.beginTransaction();//隐藏除选中的其他三个栏，显示当前选中的这个栏hideFragment(transaction);//把图片设置为亮的//设置内容区域switch (i){case 0:transaction.show(tab1);weixinImg.setImageResource(R.drawable.new_wc);break;case 1:transaction.show(tab2);friendImg.setImageResource(R.drawable.new_cont);break;case 2:transaction.show(tab3);contactImg.setImageResource(R.drawable.new_find);break;case 3:transaction.show(tab4);settingImg.setImageResource(R.drawable.new_my);break;default:break;}transaction.commit();}private void hideFragment(FragmentTransaction transaction){transaction.hide(tab1);transaction.hide(tab2);transaction.hide(tab3);transaction.hide(tab4);}@Overridepublic void onClick(View v){//每次点击事，将上次变绿的图标重置为灰色的resetImgs();switch (v.getId()){case R.id.weixin:selectFragment(0);break;case R.id.friend:selectFragment(1);break;case R.id.contact:selectFragment(2);break;case R.id.setting:selectFragment(3);break;default:break;}}public void resetImgs(){weixinImg.setImageResource(R.drawable.wc);friendImg.setImageResource(R.drawable.cont);contactImg.setImageResource(R.drawable.find);settingImg.setImageResource(R.drawable.my);}
}
5.可能出现的问题（小结）
在这次试验中，出现的问题就是FrameLayout导入错误，
创建FrameLayout的时候，各个FrameLayout中用到的是
import androidx.app.Fragment;而在MainActivity中的是
import android.app.Fragment;导入错误了，这里需要把各个FrameLayout中的哪个多出来的‘’’x‘’去掉，就ok了。
源码GitHub的地址：
链接: https://github.com/GODFF556/MyWechat.
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！