APP界面设计效果展示
微信聊天界面
微信通讯录界面
微信发现界面
微信设置页面
界面设计分析
上述界面可以分为三部分分别进行开发,一是顶部的标题栏,二是中间的内容栏,三是底部的菜单栏,接下来分析三部分分别如何设计开发。
底部菜单
底部需要有四个按钮来回切换,所以可以将底部分为四个空间,每个空间都由textView和imageButton组成。
<!-- 单个空间代码示例 -->
<LinearLayout
android:id="@+id/id_tab_news"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
>
<ImageButton
android:id="@+id/id_tab_news_img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:clickable="false"
android:background="#000000"
android:src="@drawable/tab_weixin_normal"
/>
<TextView
android:id="@+id/textview1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:background="@color/black"
android:text="微信"
android:textColor="@color/white"
android:textSize="20sp"
/>
</LinearLayout>
顶部标题
顶部标题只需一个TextView控件即可,所以在top.xml中进行简单布局即可
<!--top.xml-->
<?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="65dp"
android:gravity="center"
android:background="@color/black"
android:orientation="vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="冒牌微信"
android:textColor="@color/white"
android:textSize="25sp"
/>
</LinearLayout>
中间内容区
中间内容需要在点击不同的按钮时进行切换,且其他部分不变,因此可以引入fragment实现。通过inflate方法将xml布局压缩到一个fragment中,当在主程序中通过按钮调用时,实际上中间切换的是fragment,每一个fragment拥有自己的界面。
核心代码
<?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"
tools:context=".news">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="40sp"
android:textColor="@color/black"
android:text="@string/hello_blank_fragment" />
</LinearLayout>
public class news extends Fragment {
public news() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
//将xml文件压缩至container
return inflater.inflate(R.layout.fragment_news, container, false);
}
}
整体布局
整体布局在activity_main.xml文件中体现,通过include标签引入top.xml和bottom.xml布局文件
<!--activity_main.xml-->
<?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"></include>
<!--引入顶部-->
<FrameLayout
android:id="@+id/Frame_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<include layout="@layout/bottom"></include>
<!--引入底部-->
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
功能实现方法
页面切换
核心思路:通过fragment的控制达到显示所需页面而隐藏其他页面,就可以实现四个页面的相互切换。
核心代码
初始化fragment,将xml布局装入container
private Fragment news = new news();
private Fragment friends = new friends();
private Fragment address =new address();
private Fragment setting = new setting();
private FragmentManager fragmentManager;
private void init_Fragment(){
fragmentManager =getFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.add(R.id.Frame_container,news);
fragmentTransaction.add(R.id.Frame_container,friends);
fragmentTransaction.add(R.id.Frame_container,address);
fragmentTransaction.add(R.id.Frame_container,setting);
fragmentTransaction.commit();
showFragment(0);
news_button.setImageResource(R.drawable.tab_weixin_pressed);
}
隐藏所有fragment
private void hide_Fragment(FragmentTransaction fragmentTransaction)
{
fragmentTransaction.hide(news);
fragmentTransaction.hide(friends);
fragmentTransaction.hide(address);
fragmentTransaction.hide(setting);
}
显示特定的fragment
private void showFragment(int i) {
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
hide_Fragment(fragmentTransaction);
switch (i){
case 0:
fragmentTransaction.show(news);
break;
case 1:
fragmentTransaction.show(friends);
break;
case 2:
fragmentTransaction.show(setting);
break;
case 3 :
fragmentTransaction.show(address);
break;
default:
break;
}
fragmentTransaction.commit();
}
定义onClick()响应监听,并在监听到点击动作时显示相应fragment。
四个Button响应时分别向showFragment()函数传入参数0、1、2、3,showFragment()函数中通过switch语句重设资源图片和transaction,实现点击后按钮图片变绿且其余变灰同时fragment内容发生切换。
@Override
public void onClick(View view) {
resetButton();
switch (view.getId()){
case R.id.id_tab_news:
showFragment(0);
news_button.setImageResource(R.drawable.tab_weixin_pressed);
break;
case R.id.id_tab_friends:
showFragment(1);
friends_button.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case R.id.id_tab_setting:
showFragment(2);
setting_button.setImageResource(R.drawable.tab_settings_pressed);
break;
case R.id.id_tab_address:
showFragment(3);
address_button.setImageResource(R.drawable.tab_address_pressed);
break;
default:
break;
}
}
按钮颜色切换
核心思路:提前准备正常状态下和按压状态下的按钮图片,当监听到点击事件时,在显示fragment的同时,重设imageButton的图片资源,设置为按压后的按钮,当切换按钮时,重设所有按钮的状态。
核心代码:
重设按钮图片资源
private void resetButton(){
news_button.setImageResource(R.drawable.tab_weixin_normal);
friends_button.setImageResource(R.drawable.tab_find_frd_normal);
address_button.setImageResource(R.drawable.tab_address_normal);
setting_button.setImageResource(R.drawable.tab_settings_normal);
}
代码仓库地址:
gitee仓库地址