本文详细介绍了如何在Android平台上实现微信首页的页面分层设计，包括顶部title、底部菜单和主体内容的设计。通过创建Fragment实现内容切换，并编写逻辑代码完成点击事件的响应，展示了从布局XML到Java代码的完整实现过程。
移动开发第一次作业——实现微信首页跳转
文章目录
一、页面分层设计
经过分析，首页分为三个部分：、
- 顶部title显示
- 主体
- 底部菜单
二、顶部title设计
使用水平线性布局，将一个TextView放入其中即可
code如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/top"
android:layout_width="match_parent"
android:layout_height="55dp"
android:gravity="bottom"
android:background="@color/bag_w"
>
<TextView
android:id="@+id/top_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="@string/top_text"//微信
android:textColor="@color/black"
android:textSize="24sp" />
</LinearLayout>
三、底部菜单设计
1、布局结构：
2、图片及文字数据添加
每个菜单下载两个图片放入drawable目录下，用于点击切换显示不同颜色的图片。具体做法是设置选中属性，当imageView被选中显示图片1否则显示图片2。文字颜色类似设置。
drawable目录结构：
图片切换示例（以通讯录为例）code： icon_address.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/address_1" android:state_selected="true"/>
<item android:drawable="@drawable/address_0"/>
</selector>
文字颜色code：textcolor.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:color="@color/textChange"></item>
<item android:color="@color/black"></item>
</selector>
随后在控件的code设计中将图片引用路径和文字颜色路径设置为相对应的.xml文件即可。具体操作如下：
<ImageView
android:id="@+id/ima_address"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="@drawable/icon_address" //设置引用路径
/>
<TextView
android:id="@+id/text_address"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="@drawable/textcolor"//设置引用路径
android:layout_weight="2"
android:gravity="center"
android:text="@string/bottom_address" />
将其他四个ImageView和TextView做相同操作即可。
随后在MainActivity中绑定相关点击事件即可。
四、主体内容设计
只用在activity_main.xml中加入一个FrameLayout作为容器，之后新建四个Fragment然后点击相对应的菜单将Fragment替换到FrameLayout中。
五、Fragment实现切换功能
1.新建四个Fragment类
由于本阶段只用返还fragment页面并显示文字即可，所以不用更改初始化的代码，写好return即可
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_wx, container, false);
}
2、在Fragment中添加文字说明
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="40sp"
android:text="@string/page_address" />//这是通讯录
至此所有的页面设计和数据都已经准备好了，下面写MainActivity.java中的逻辑代码。
六、逻辑代码书写，实现点击切换效果
本部分介绍主要函数。
1、inItFragment（实现进入默认显示微信菜单）
private void inInFragment(Fragment fragment){
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
//将传入的fragment添加到fragment_main中fragment_main是一个FrameLayout控件
transaction.add(R.id.fragment_main,fragment);
transaction.commit();
}
2、replaceFragment（动态切换fragment）
接受当前Fragment，并将此Fragment替换进R.id.fragment_main这个FrameLayout中显示。
private void replaceFragment(Fragment fragment) {
//得到一个fragmentManager
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
//将传入的fragment替换到fragment_main中fragment_main是一个FrameLayout控件
transaction.replace(R.id.fragment_main,fragment);
transaction.commit();
}
3、changeColor（切换图片以及文字颜色）
接受一个id用于指示当前被点击的页面并将其中的ImageView和TextView的Selected属性设置为true
离开此页面时将Selected属性设置为false。
private void changeColor(int id){
//当前页面imgView和textView指针，离开当前菜单时将控件设置为未选中
imgCur.setSelected(false);
textCur.setSelected(false);
switch (id){
case 1:
textWx.setSelected(true);
imgWx.setSelected(true);
textCur = textWx;
imgCur=imgWx;
break;
case 2:
textAddress.setSelected(true);
imgAddress.setSelected(true);
textCur=textAddress;
imgCur=imgAddress;
break;
case 3:
textFriend.setSelected(true);
imgFriend.setSelected(true);
textCur=textFriend;
imgCur = imgFriend;
break;
case 4:
textMe.setSelected(true);
imgMe.setSelected(true);
textCur=textMe;
imgCur = imgMe;
break;
default:
break;
}
}
4、重写监听函数
使用switch-case语句，检查当前点击的视图id，然后执行两个函数
replaceFragment(new FragmentWx());
changeColor(1);
@Override
public void onClick(View view) {
switch (view.getId()){
case R.id.linear_wx:
replaceFragment(new FragmentWx());
changeColor(1);
break;
case R.id.linear_address:
replaceFragment(new FragmentAddress());
changeColor(2);
break;
case R.id.linear_friend:
replaceFragment(new FragmentFriend());
changeColor(3);
break;
case R.id.linear_me:
replaceFragment(new FragmentMe());
changeColor(4);
break;
default:
break;
}
}
5、重写onCreate函数
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//隐藏项目名
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
//初始化成员参数
inItParam();
//默认显示微信菜单
inItFragment(new FragmentWx());
imgWx.setSelected(true);
textWx.setSelected(true);
}
七、MainActivity全部代码
package com.hsy.wx;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private LinearLayout linearWx,linearAddress,linearFriend,linearMe;
private ImageView imgWx,imgAddress,imgFriend,imgMe,imgCur;
private TextView textWx,textAddress,textFriend,textMe,textCur;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//隐藏项目名
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
inItParam();
inItFragment(new FragmentWx());
imgWx.setSelected(true);
textWx.setSelected(true);
}
private void inItParam(){
imgCur = findViewById(R.id.ima_wx);
textCur = findViewById(R.id.text_wx);
//微信点击事件
textWx = findViewById(R.id.text_wx);
imgWx = findViewById(R.id.ima_wx);
linearWx = findViewById(R.id.linear_wx);
linearWx.setOnClickListener(this);
//通讯录
textAddress=findViewById(R.id.text_address);
imgAddress = findViewById(R.id.ima_address);
linearAddress = findViewById(R.id.linear_address);
linearAddress.setOnClickListener(this);
//朋友圈
textFriend = findViewById(R.id.text_friend);
imgFriend = findViewById(R.id.ima_friend);
linearFriend = findViewById(R.id.linear_friend);
linearFriend.setOnClickListener(this);
//我的
textMe = findViewById(R.id.text_me);
imgMe = findViewById(R.id.ima_me);
linearMe = findViewById(R.id.linear_me);
linearMe.setOnClickListener(this);
}
private void changeColor(int id){
imgCur.setSelected(false);
textCur.setSelected(false);
switch (id){
case 1:
textWx.setSelected(true);
imgWx.setSelected(true);
textCur = textWx;
imgCur=imgWx;
break;
case 2:
textAddress.setSelected(true);
imgAddress.setSelected(true);
textCur=textAddress;
imgCur=imgAddress;
break;
case 3:
textFriend.setSelected(true);
imgFriend.setSelected(true);
textCur=textFriend;
imgCur = imgFriend;
break;
case 4:
textMe.setSelected(true);
imgMe.setSelected(true);
textCur=textMe;
imgCur = imgMe;
break;
default:
break;
}
}
@Override
public void onClick(View view) {
switch (view.getId()){
case R.id.linear_wx:
// imgWx.setSelected(true);
// imgCur=imgWx;
replaceFragment(new FragmentWx());
changeColor(1);
break;
case R.id.linear_address:
// imgAddress.setSelected(true);
// imgCur = imgAddress;
replaceFragment(new FragmentAddress());
changeColor(2);
break;
case R.id.linear_friend:
// imgFriend.setSelected(true);
// imgCur=imgFriend;
replaceFragment(new FragmentFriend());
changeColor(3);
break;
case R.id.linear_me:
// imgMe.setSelected(true);
// imgCur=imgMe;
replaceFragment(new FragmentMe());
changeColor(4);
break;
default:
break;
}
}
private void inItFragment(Fragment fragment){
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.add(R.id.fragment_main,fragment);
transaction.commit();
}
//动态切换fragment
private void replaceFragment(Fragment fragment) {
//得到一个fragmentManager
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
//将传入的fragment替换到fragment_main中fragment_main是一个FrameLayout控件
transaction.replace(R.id.fragment_main,fragment);
transaction.commit();
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
