一.实验环境:
Windows系统,Android Studio
二.界面功能
1.可展示出四个可切换界面:微信、朋友、通讯录、设置;
2.上方栏标题居中,内容随下方栏的选择而切换,下方栏可点击切换,点击过的界面的图标为绿色,没有点击的界面的图标为灰色;
3.主要从top、bottom、中间fragment布局以及MainActivity四个方面分析。
三.界面设计代码
1.顶部top.xml文件
在res文件夹的layout中新建top.xml,将标题栏的内容居中,并将背景色(android:background)调为黑色,文字(android:textColor)调为白色。
<?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="50dp"
android:background="@color/black"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/textView6"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:text="WeChat"
android:textColor="@color/white"
android:layout_gravity="center"
android:textSize="30sp" />
</LinearLayout>
设置后的效果如下图
2.底部bottom.xml文件
首先将图标复制粘贴到drawable中,在res文件夹的layout中新建bottom.xml,拖入TextView拖入ImageButton后会调用drawable,选取所需的图标。
<?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="80dp"
android:background="@drawable/bottom_bar"
android:orientation="horizontal"
android:layout_gravity="bottom"
android:baselineAligned="false">
<LinearLayout
android:id="@+id/id_tab_weixin"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_weixin_img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:clickable="false"
android:contentDescription="@string/app_name"
app:srcCompat="@drawable/tab_weixin_pressed" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:text="微信"
android:textColor="#ffffff"
android:clickable="false"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_frd"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_frd_img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:clickable="false"
android:contentDescription="@string/app_name"
app:srcCompat="@drawable/tab_find_frd_normal" />
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:text="朋友"
android:textColor="#ffffff"
android:clickable="false"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_contact"
android:layout_width="0dp"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_contact_img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:clickable="false"
android:contentDescription="@string/app_name"
app:srcCompat="@drawable/tab_address_normal" />
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:text="通讯录"
android:textColor="#ffffff"
android:clickable="false"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_settings"
android:layout_width="0dp"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_settings_img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:clickable="false"
android:contentDescription="@string/app_name"
app:srcCompat="@drawable/tab_settings_normal" />
<TextView
android:id="@+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:text="设置"
android:textColor="#ffffff"
android:clickable="false"
android:textSize="15sp" />
</LinearLayout>
</LinearLayout>
设置后的效果如下图
3.中间fragment.xml文件
这个是聊天界面的fragment设计,此处将第一个界面微信界面作为例子,其他三个和该xml文件相似,只用修改其中的文本属性(android:text)即可。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/fragment_chat"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView6"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="这是微信聊天界面"
android:textSize="30sp" />
</LinearLayout>
微信聊天界面的设置效果如下图
4.窗体总布局的activity_main.xml文件
这个文件中使用了include和FrameLayout(重叠布局)来导入我们设置的top和bottom的xml文件,而且设置了Fragment对应的区域。
<?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="match_parent"
android:orientation="vertical">
<include layout="@layout/top" />
<FrameLayout
android:id="@+id/id_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<include layout="@layout/bottom" />
</LinearLayout>
5.fragment.xml对应的.java文件
自定义的Fragment类继承Fragment类,重写其中的onCreateView方法,用于返回我们所创建的关于聊天的fragment_chat.xml 。这里展示ChatFragment.java文件作为例子,其他三个文件只需要修改其中所需layout属性的id值即可。
package com.example.homework;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.app.Fragment;
public class ChatFragment extends Fragment {
// TODO: Rename parameter arguments, choose names that match
// the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
private static final String ARG_PARAM1 = "param1";
private static final String ARG_PARAM2 = "param2";
// TODO: Rename and change types of parameters
private String mParam1;
private String mParam2;
public ChatFragment() {
// Required empty public constructor
}
public static ChatFragment newInstance(String param1, String param2) {
ChatFragment fragment = new ChatFragment();
Bundle args = new Bundle();
args.putString(ARG_PARAM1, param1);
args.putString(ARG_PARAM2, param2);
fragment.setArguments(args);
return fragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
mParam1 = getArguments().getString(ARG_PARAM1);
mParam2 = getArguments().getString(ARG_PARAM2);
}
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_chat, container, false);
}
}
6.MainActivity.java文件
在文件中,我们设置了有关四个fragment片段的变化代码,底部的click事件,以及底部图标和文字的变化代码。通过这些代码实现底部点击后界面的图标由灰色变为绿色,且可以在图标之间进行点击切换操作。
package com.example.homework;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;
public class MainActivity extends Activity implements View.OnClickListener {
private final Fragment mTab01 = new ChatFragment();
private final Fragment mTab02 = new FrdFragment();
private final Fragment mTab03 = new ContactsFragment();
private final Fragment mTab04 = new SettingsFragment();
private FragmentManager fm;
private LinearLayout mTabWeiXin;
private LinearLayout mTabFrd;
private LinearLayout mTabContact;
private LinearLayout mTabSettings;
private ImageButton mImgTabWeiXin;
private ImageButton mImgTabFrd;
private ImageButton mImgTabContact;
private ImageButton mImgTabSettings;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE );
setContentView(R.layout.activity_main);
initView();
initFragment();
initEvent();
SelectFragment(0);
}
private void initFragment(){
fm = getFragmentManager();
FragmentTransaction transaction = fm.beginTransaction();
transaction.add(android.R.id.content, mTab01);
transaction.add(android.R.id.content, mTab02);
transaction.add(android.R.id.content, mTab03);
transaction.add(android.R.id.content, mTab04);
transaction.commit();
}
private void initView(){
mTabWeiXin= findViewById(R.id.id_tab_weixin);
mTabFrd= findViewById(R.id.id_tab_frd);
mTabContact= findViewById(R.id.id_tab_contact);
mTabSettings= findViewById(R.id.id_tab_settings);
mImgTabWeiXin = findViewById(R.id.id_tab_weixin_img);
mImgTabFrd = findViewById(R.id.id_tab_frd_img);
mImgTabContact = findViewById(R.id.id_tab_contact_img);
mImgTabSettings = findViewById(R.id.id_tab_settings_img);
}
private void initEvent(){
mTabWeiXin.setOnClickListener(this);
mTabFrd.setOnClickListener(this);
mTabContact.setOnClickListener(this);
mTabSettings.setOnClickListener(this);
}
private void hideFragment(FragmentTransaction transaction) {
transaction.hide(mTab01);
transaction.hide(mTab02);
transaction.hide(mTab03);
transaction.hide(mTab04);
}
private void SelectFragment(int i){
FragmentTransaction transaction = fm.beginTransaction();
hideFragment(transaction);
//把图片设置为亮的
//设置内容区域
switch (i){
case 0:
transaction.show(mTab01);
mImgTabWeiXin.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
transaction.show(mTab02);
mImgTabFrd.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
transaction.show(mTab03);
mImgTabContact.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
transaction.show(mTab04);
mImgTabSettings.setImageResource(R.drawable.tab_settings_pressed);
break;
default:
break;
}
transaction.commit();
}
@SuppressLint("NonConstantResourceId")
@Override
public void onClick(View view) {
ResetImg();
switch (view.getId()){
case R.id.id_tab_weixin:
SelectFragment(0);
break;
case R.id.id_tab_frd:
SelectFragment(1);
break;
case R.id.id_tab_contact:
SelectFragment(2);
break;
case R.id.id_tab_settings:
SelectFragment(3);
break;
}
}
public void ResetImg(){
//图片变灰
mImgTabWeiXin.setImageResource(R.drawable.tab_weixin_normal);
mImgTabFrd.setImageResource(R.drawable.tab_find_frd_normal);
mImgTabContact.setImageResource(R.drawable.tab_address_normal);
mImgTabSettings.setImageResource(R.drawable.tab_settings_normal);
}
}
四.运行界面展示
五.实验小结
本次实验,我们通过导入top和bottom实现了布局中顶层和底部的实现,而且通过中间的fragment片段实现了对应界面的展示以及隐藏。通过onclick的监听器实现了点击事件的完成,熟悉了几个基础的组件例如LinearLayout,ImageView等的使用。
在实验中我也遇到了许多问题,例如运行程序时候一直报错keep stopping,无法启动app,然后经过在logcat中的查看,发现错误位于MainActivity文件中,报错提示为 Caused by:java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.这是因为MainActivity继承了AppCompatActivity就回出现上述错误,解决的办法就是让MainActivity去继承Activity,而不是AppCompatActivity,改完之后,再导入Activity包即可正常运行app。