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
<include layout="@layout/top"/>
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
</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,存放图标和名称。
<LinearLayout
android:id="@+id/tab01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@color/black"
android:orientation="vertical">
<ImageView
android:id="@+id/weixinButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="@drawable/tab_weixin_normal" />
<TextView
android:id="@+id/weixinText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="微信"
android:textColor="@color/white"
android:textSize="18sp" />
</LinearLayout>
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;
}
}