安卓开发之类微信界面
- 微信主界面:实现点击按钮切换不同界面
- 【顶部设计】
- 【底部设计】
- 【中部设计】
- 【设置点击按扭时不同界面的显示】
- 【编写MainActivity.java】
微信主界面:实现点击按钮切换不同界面
1.采用整体linearlayout的整体布局
2.头部采用linearlayout布局,内含textview控件
3.中部显示主界面采用fremwork布局
4.底部采用linearlayout设计,内含imgbutton、textview等控件
首先在androidstudio中新建一个项目,选择empty activity,等待项目构建完成,一个微信类聊天界面主要分为头部标题名称,中间显示内容,底部布局按钮切换界面这三个部分
【顶部设计】
在layout文件夹新建一个top.xml文件,将textview控件拖入其中,
设置linearlayout布局以及textview控件属性
<?xml version="1.0" encoding="utf-8"?>
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/app_name"
android:textColor="#ffffff"
android:textSize="20sp" />
【底部设计】
新建一个buttom.xml文件,将布局文件orientation属性设置为horizontal即水平的,在布局文件中添加四个linearlayout布局控件将orientation属性设置为vertical,并在四个linearlayout分别添加ImgButton和TextView控件,并设置相关属性
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="@+id/id_weixin"
android:layout_width="0dp"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<ImageButton
android:id="@+id/img_weixin"
android:layout_width="match_parent"
android:layout_height="60dp"
android:contentDescription="@string/app_name"
tools:srcCompat="@drawable/tab_weixin_normal" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="微信"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_firends"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/img_friends"
android:layout_width="match_parent"
android:layout_height="60dp"
android:contentDescription="@string/app_name"
tools:srcCompat="@drawable/normal1" />
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="朋友"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_link"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/img_link"
android:layout_width="match_parent"
android:layout_height="60dp"
android:contentDescription="@string/app_name"
tools:srcCompat="@drawable/normal2" />
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="联系人"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_set"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/img_set"
android:layout_width="match_parent"
android:layout_height="60dp"
android:contentDescription="@string/app_name"
tools:srcCompat="@drawable/normal3" />
<TextView
android:id="@+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="设置"
android:textSize="15sp" />
</LinearLayout>
在res文件夹下的drawable文件夹中准备一些设计图标的图片
效果:
【中部设计】
新建四个xml文件,这四个文件就是切换不同界面时要显示的内容,
往其中添加textview控件
设置布局属性 <?xml version="1.0" encoding="utf-8"?>
<TextView
android:id="@+id/textView6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="这是朋友圈界面"
android:textSize="25sp" />
启动界面即activity_main.xml文件设置
主界面布局文件的设置,在这里我们要设置好刚刚设置好的三个部分的xml文件将头部,底部,中部组合成一个完整的界面,首先往其中添加一个framelayout布局,这个是用于存放中部四个不同的界面的xml文件,因为头部和下面的按钮布局一般是不变的,点击按钮变换的主要是中间这部分的显示内容然后在文件中引入头部布局文件与下部的点击切换布局文件
设置frameLayout控件属性使布局合理显示并设置id:
头部与尾部的布局我们已经设置好,直接使用include分别在framelayout上面与下面引入即可
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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”
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/top" />
<FrameLayout
android:id="@+id/id_fragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@drawable/singht">
</FrameLayout>
<include layout="@layout/buttom" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
显示效果:
到这里布局就基本结束了
【设置点击按扭时不同界面的显示】
上面我们已经设置了页面的布局,但是却没有实现点击按钮页面就切换的效果,接下来我们打开MainActivity.java这个文件进行代码编写
首先我们要给中部的framelayout控件压入四个布局文件,在java文件夹新建四个blank类型的fragment文件,
在四个fragment文件中将要实例化的布局文件转换成我们已经编写好的四个布局文件,改变其中的参数
为什么要这么做呢?因为我们是无法直接操作xml文件的,这样做相当于把这四个布局文件进行实例化我们可以直接对这四个文件执行操作,比如将他们在特定的时候进行显示或隐藏等操作
【编写MainActivity.java】
编写MainActivity.java文件
编写函数将四个界面添加到fragment中,
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Fragment fragment1= new weixinFragment();//分别将四个fragment类实例化
private Fragment fragment2=new friendsFragment();
private Fragment fragment3= new linklistFragment();
private Fragment fragment4= new settingFragment();
private FragmentManager fm;//声明控件
private LinearLayout mweixin;
private LinearLayout mfriends;
private LinearLayout mlinklist;
private LinearLayout msetting;
private ImageButton first1;
private ImageButton first2;
private ImageButton first3;
private ImageButton first4;
//将四个fragment添加至framework组件中
public void initFragment(){
fm = getFragmentManager();
FragmentTransaction transaction=fm.beginTransaction();
transaction.add(R.id.id_fragment,fragment1);
transaction.add(R.id.id_fragment,fragment2);
transaction.add(R.id.id_fragment,fragment3);
transaction.add(R.id.id_fragment,fragment4);
transaction.commit();}
编写初始化控件函数
public void initView(){
mweixin=(LinearLayout) findViewById(R.id.id_weixin);
mfriends=(LinearLayout) findViewById(R.id.id_firends);
mlinklist=(LinearLayout) findViewById(R.id.id_link);
msetting=(LinearLayout) findViewById(R.id.id_set);
first1=(ImageButton)findViewById(R.id.img_weixin);
first2=(ImageButton)findViewById(R.id.img_friends);
first3=(ImageButton)findViewById(R.id.img_link);
first4=(ImageButton)findViewById(R.id.img_set);
}
编写相应监听事件,就是当我们点击不同按钮是显示不同的界面,给事件绑定相应函数
public void initEvent(){
first1.setOnClickListener(this);
first2.setOnClickListener(this);
first3.setOnClickListener(this);
first4.setOnClickListener(this);
//msetting.setOnClickListener(this);
}
编写一个当点击不同按钮时展示不同界面的函数
public void selectFragment(int i){
FragmentTransaction transaction=fm.beginTransaction();
hideFragment(transaction);
resetimg();
switch (i){
case 0:
transaction.show(fragment1);
first1.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
transaction.show(fragment2);
first2.setImageResource(R.drawable.press1);
break;
case 2:
transaction.show(fragment3);
first3.setImageResource(R.drawable.press2);
break;
case 3:
transaction.show(fragment4);
first4.setImageResource(R.drawable.press3);
break;
default:
break;
}
transaction.commit();
}
设置按钮图片
public void resetimg(){
first1.setImageResource(R.drawable.tab_weixin_normal);
first2.setImageResource(R.drawable.normal1);
first3.setImageResource(R.drawable.normal2);
first4.setImageResource(R.drawable.normal3);
}
整个代码:
package com.example.mywechat;
import androidx.appcompat.app.AppCompatActivity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.view.SurfaceControl;
import android.view.View;
import android.view.Window;
import android.os.Bundle;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Fragment fragment1= new weixinFragment();
private Fragment fragment2=new friendsFragment();
private Fragment fragment3= new linklistFragment();
private Fragment fragment4= new settingFragment();
private FragmentManager fm;
private LinearLayout mweixin;
private LinearLayout mfriends;
private LinearLayout mlinklist;
private LinearLayout msetting;
private ImageButton first1;
private ImageButton first2;
private ImageButton first3;
private ImageButton first4;
public void initView(){
mweixin=(LinearLayout) findViewById(R.id.id_weixin);
mfriends=(LinearLayout) findViewById(R.id.id_firends);
mlinklist=(LinearLayout) findViewById(R.id.id_link);
msetting=(LinearLayout) findViewById(R.id.id_set);
first1=(ImageButton)findViewById(R.id.img_weixin);
first2=(ImageButton)findViewById(R.id.img_friends);
first3=(ImageButton)findViewById(R.id.img_link);
first4=(ImageButton)findViewById(R.id.img_set);
}
public void initFragment(){
fm = getFragmentManager();
FragmentTransaction transaction=fm.beginTransaction();
transaction.add(R.id.id_fragment,fragment1);
transaction.add(R.id.id_fragment,fragment2);
transaction.add(R.id.id_fragment,fragment3);
transaction.add(R.id.id_fragment,fragment4);
transaction.commit();
}
public void hideFragment(FragmentTransaction transaction){
transaction.hide(fragment1);
transaction.hide(fragment2);
transaction.hide(fragment3);
transaction.hide(fragment4);
}
public void resetimg(){
first1.setImageResource(R.drawable.tab_weixin_normal);
first2.setImageResource(R.drawable.normal1);
first3.setImageResource(R.drawable.normal2);
first4.setImageResource(R.drawable.normal3);
}
public void selectFragment(int i){
FragmentTransaction transaction=fm.beginTransaction();
hideFragment(transaction);
resetimg();
switch (i){
case 0:
transaction.show(fragment1);
first1.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
transaction.show(fragment2);
first2.setImageResource(R.drawable.press1);
break;
case 2:
transaction.show(fragment3);
first3.setImageResource(R.drawable.press2);
break;
case 3:
transaction.show(fragment4);
first4.setImageResource(R.drawable.press3);
break;
default:
break;
}
transaction.commit();
}