目录

一、项目内容

二、代码实现

1、项目结构

2.头部代码

3.底部代码

4.四个内容界面

5.窗体总布局

6.MainActivity实现点击图标与页面的互动

三、运行效果

四、总结

---

一、项目内容

????????进行仿微信界面框架设计，包含微信、朋友、联系人、设置四个tab页面，点击相应图标进行切换，且选中图标变为绿色，未选中为灰色。

? ? ? ? 开发环境：Android Studio、Android SDK 11.0

二、代码实现 1、项目结构

????????

2.头部代码

top.xml，使用LinearLayout布局

<?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="wrap_content" android:background="@color/black" > <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:text="My WeChat" android:textColor="@color/white" android:textSize="30sp" /> </LinearLayout>

?

3.底部代码

bottom.xml，每个垂直的LinearLayout插入一个ImageView图像与一个TextView文本框

<?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="wrap_content" android:orientation="horizontal"> <LinearLayout android:id="@+id/tab01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="vertical"> <ImageView android:id="@+id/tab01_img" android:layout_width="match_parent" android:layout_height="wrap_content" app:srcCompat="@drawable/weixin_pressed" /> <TextView android:id="@+id/textView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="微信" /> </LinearLayout> <LinearLayout android:id="@+id/tab02" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="vertical"> <ImageView android:id="@+id/tab02_img" android:layout_width="match_parent" android:layout_height="wrap_content" app:srcCompat="@drawable/friend" /> <TextView android:id="@+id/textView2" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="朋友" /> </LinearLayout> <LinearLayout android:id="@+id/tab03" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="vertical"> <ImageView android:id="@+id/tab03_img" android:layout_width="match_parent" android:layout_height="wrap_content" app:srcCompat="@drawable/contact" /> <TextView android:id="@+id/textView3" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="联系人" /> </LinearLayout> <LinearLayout android:id="@+id/tab04" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="vertical"> <ImageView android:id="@+id/tab04_img" android:layout_width="match_parent" android:layout_height="wrap_content" app:srcCompat="@drawable/setting" /> <TextView android:id="@+id/textView4" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:text="设置" /> </LinearLayout> </LinearLayout>

?

4.四个内容界面

fragment.xml，以fragment_weixin.xml为例，选中微信图标时，界面中部显示该内容。

<?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:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" tools:context=".weixinFragment"> <!-- TODO: Update blank fragment layout --> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:textSize="50sp" android:gravity="center" android:text="这是微信界面" /> </LinearLayout>

?

5.窗体总布局

? ? ? ? activity_main.xml，使用include语法将头部top.xml与底部bottom.xml引入。

<?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="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <include layout="@layout/top" /> <FrameLayout android:id="@+id/content" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1"></FrameLayout> <include layout="@layout/bottom" /> </LinearLayout>

?

6.MainActivity实现点击图标与页面的互动

? ? ? ? 在MainActivity中，编写了相应方法，实现了页面显示的初始化、图标点击事件与页面切换的互动、图标变色事件等。

package com.example.weixin; 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.widget.ImageView; import android.widget.LinearLayout; public class MainActivity extends AppCompatActivity implements View.OnClickListener{ private Fragment weixinFragment = new weixinFragment(); private Fragment friendFragment = new friendFragment(); private Fragment contactFragment = new contactFragment(); private Fragment settingFragment = new settingFragment(); private FragmentManager fm; private LinearLayout tab01,tab02,tab03,tab04; private ImageView tab01_img; private ImageView tab02_img; private ImageView tab03_img; private ImageView tab04_img; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); weixinFragment = new weixinFragment(); friendFragment = new friendFragment(); contactFragment = new contactFragment(); settingFragment = new settingFragment(); tab01 = findViewById(R.id.tab01); tab02 = findViewById(R.id.tab02); tab03 = findViewById(R.id.tab03); tab04 = findViewById(R.id.tab04); fm = getSupportFragmentManager(); initialfragment(); tab01_img = findViewById(R.id.tab01_img); tab02_img = findViewById(R.id.tab02_img); tab03_img = findViewById(R.id.tab03_img); tab04_img = findViewById(R.id.tab04_img); tab01.setOnClickListener(this); tab02.setOnClickListener(this); tab03.setOnClickListener(this); tab04.setOnClickListener(this); } private void initialfragment(){ FragmentTransaction transaction = fm.beginTransaction(); transaction.add(androidx.appcompat.R.id.content,weixinFragment); transaction.add(androidx.appcompat.R.id.content,friendFragment); transaction.add(androidx.appcompat.R.id.content,contactFragment); transaction.add(androidx.appcompat.R.id.content,settingFragment); Hide(transaction); transaction.show(weixinFragment); transaction.commit(); } @Override public void onClick(View view) { switch (view.getId()){ case R.id.tab01: show(1); reset(); tab01_img.setImageResource(R.drawable.weixin_pressed); break; case R.id.tab02: show(2); reset(); tab02_img.setImageResource(R.drawable.friend_pressed); break; case R.id.tab03: show(3); reset(); tab03_img.setImageResource(R.drawable.contact_pressed); break; case R.id.tab04: show(4); reset(); tab04_img.setImageResource(R.drawable.setting_pressed); break; default: break; } } private void show(int i) { FragmentTransaction transaction = fm.beginTransaction(); Hide(transaction); switch (i){ case 1:transaction.show(weixinFragment);break; case 2:transaction.show(friendFragment);break; case 3:transaction.show(contactFragment);break; case 4:transaction.show(settingFragment);break; default:break; } transaction.commit(); } private void Hide(FragmentTransaction transaction) { transaction.hide(weixinFragment); transaction.hide(friendFragment); transaction.hide(contactFragment); transaction.hide(settingFragment); } private void reset(){ tab01_img.setImageResource(R.drawable.weixin); tab02_img.setImageResource(R.drawable.friend); tab03_img.setImageResource(R.drawable.contact); tab04_img.setImageResource(R.drawable.setting); } } 三、运行效果

?

?

四、总结

? ? ? ? ?本次实验算是第一次接触android开发有关技术，一步步做下来后还是感觉学到了不少东西，感觉android开发环境挺新颖，还比较感兴趣，希望在往后学习中能更进一步，掌握更丰富的技术。

?

项目源码Gitee地址：Kyrie/weixin

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。