类微信小程序首页框架

连备胎都不是

已于 2022-03-21 22:05:44 修改

阅读量110

点赞数

分类专栏：实验二文章标签： java

于 2022-03-21 21:47:14 首次发布

本文链接：https://blog.csdn.net/xieshaoshuaifei/article/details/123647045

版权

实验二专栏收录该内容

2 篇文章 0 订阅

订阅专栏

activity_main.xml文件写页面布局，分为上中下三个部分，包括为顶层的top.xml,中部的framelayout,底部的buttom.xml；
top.xm内容为页面标题，我的微信；
中部framelayout包括四个framgment.xml文件，显示页面内容，例如----这是XX界面
底部为button.xml文件，包括四个底部选择框，通过点击选择框，对应页面内容发生改变，且点击后选择框图片颜色会改变；

1.导入资源
图片资源导入/res/drawable目录下

自定义颜色在/res/values/color.xml中添加

2.页面布局（.xml文件的编写）
.xml文件都在/res/layout目录下

2.1 activity_main.xml文件
LinearLayout下调用top.xml，FrameLayout控件，button.xml

</FrameLayout>

<include layout="@layout/button"/>

2.2 top.xml文件
LinearLayout下调用TextView控件，显示首页标题

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

2.3 fragment.xml文件
LinearLayout下调用TextView控件，显示页面内容

fragment_weixin.xml 显示这是微信界面
fragment_friend.xml 显示这是通讯录界面
fragment_find.xml 显示这是发现界面
fragment_setting.xml 显示这是设置界面
2.4 button.xml文件
在竖向的LinearLayout嵌入四个横向的LinearLayout，每个横向的LinearLayout中包括一个ImageView和一个TextView,存放图标和名称。

3.Java代码编写
3.1 fragment.java文件
每个fragment.xml文件对应一个fragment.java文件，每一个类相当于对应一个布局，这样我们就将四个布局所对应的xml文件就变成了四个类对象，从而可以正常的调用它

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

(修改R.layout.—为对应xml文件即可)

3.2 MainActivity.java文件
3.2.1 对要用的控件建立相关变量
private Fragment wexinFragment;
private Fragment friendFragment;
private Fragment findFragment;
private Fragment SettingFragment;
private FragmentManager fm;

private ImageView weixinButton;
private ImageView friendButton;
private ImageView findButton;
private ImageView SettingButton;

private LinearLayout tab01,tab02,tab03,tab04;

3.2.2 编写onCreate函数
先设置监听程序
public class MainActivity extends AppCompatActivity implements View.OnClickListener

new出各个界面的对象
将新建的变量和页面中的控件联系起来，使用findviewbyid函数找到对应的控件
对bottom的四个linerlayout监听
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

wexinFragment=new wexinFragment();
findFragment=new findFragment();
friendFragment=new friendFragment();
SettingFragment=new SettingFragment();

tab01=findViewById(R.id.tab01);
tab02=findViewById(R.id.tab02);
tab03=findViewById(R.id.tab03);
tab04=findViewById(R.id.tab04);

weixinButton=findViewById(R.id.weixinButton);
friendButton=findViewById(R.id.friendButton);
findButton=findViewById(R.id.findButton);
SettingButton=findViewById(R.id.SettingButton);

weixinText=findViewById(R.id.weixinText);
friendText=findViewById(R.id.friendText);
findText=findViewById(R.id.findText);
SettingText=findViewById(R.id.SettingText);

fm=getSupportFragmentManager();
initalfragment();

tab01.setOnClickListener(this);
tab02.setOnClickListener(this);
tab03.setOnClickListener(this);
tab04.setOnClickListener(this);

}

3.2.3 编写initalfragment函数
将此前定义个4个Fragment变量使用fragmentManager添加到activity_mainw文件的Framelayout布局中

private void initalfragment() {
FragmentTransaction transaction=fm.beginTransaction();
transaction.add(R.id.content,wexinFragment);
transaction.add(R.id.content,friendFragment);
transaction.add(R.id.content,findFragment);
transaction.add(R.id.content,SettingFragment);
Hide(transaction);
transaction.show(wexinFragment);
transaction.commit();
}

3.2.4 编写hide函数
将所有的textview隐藏起来，通过点击每个图标给界面选择函数发送不同的参数，从而实现界面的选择，在界面选择函数中需要先将4个界面对应的textview控件都隐藏

private void Hide(FragmentTransaction transaction) {
transaction.hide(wexinFragment);
transaction.hide(friendFragment);
transaction.hide(findFragment);
transaction.hide(SettingFragment);
}

3.2.4 编写show函数
在显示之前调用隐藏函数hide
界面选择函数通过点击事件传送id触发选择
每次选择时要改变图标颜色，用以表示进行点击行为
private void show(int i) {
FragmentTransaction transaction=fm.beginTransaction();
Hide(transaction);
switch (i){
case 1:transaction.show(wexinFragment);weixinButton.setImageResource(R.drawable.tab_weixin_pressed);break;
case 2:transaction.show(friendFragment);friendButton.setImageResource(R.drawable.tab_weixin_pressed);break;
case 3:transaction.show(findFragment);findButton.setImageResource(R.drawable.tab_weixin_pressed);break;
case 4:transaction.show(SettingFragment);SettingButton.setImageResource(R.drawable.tab_weixin_pressed);break;
default:
break;
}
transaction.commit();

}

3.2.5 编写restBtn函数
在每次触发点击事件时，都要重置图标颜色为未点击时，否则会出现图标颜色变了一次就不会变换了的情况

private void resetBtn(){
weixinButton.setImageResource(R.drawable.tab_weixin_normal);
friendButton.setImageResource(R.drawable.tab_weixin_normal);
findButton.setImageResource(R.drawable.tab_weixin_normal);
SettingButton.setImageResource(R.drawable.tab_weixin_normal);
}

3.2.6 编写onClick函数
@Override
public void onClick(View view) {
resetBtn();
switch (view.getId()){
case R.id.tab01:
show(1);
break;
case R.id.tab02:
show(2);
break;
case R.id.tab03:
show(3);
break;
case R.id.tab04:
show(4);
break;
default:
break;
}
}