实验一安卓开发微信页面设计

实验一安卓开发微信页面设计
功能要求：
1.页面具有标题
2.具有四个页面，页面具有底部选择框，同时具有选择事件，当点击选择事件的时候进行页面切换
3.页面内容不超出边界且清晰
思路分析：
该微信界面由三部分组成
1页面顶部标题栏（top.xml）
2中间内容页面
3底部导航栏（bottom.xml）
所以我们需要编写上述几个xml布局页面，分别分析每部分的布局内容及要求：
顶部标题栏：此栏需有app的标题，标题大小颜色自定义且居中显示，背景色自选
中间内容页面：由于本app是仿微信界面，所以设置了四个页面，分别显示不同的内容
底部导航栏：四个图标，单击可以切换中间内容页面，故该布局文件中包含四个ImageButton，界面切换部分需要用Fragment实现

设计过程
1.资源文件导入
把图片等资源文件导入到/app/res/drawble 目录下

2.布局设计
此仿微信界面分为三部分，标题栏，中间内容页面，底部栏，故分部分进行设计。
标题栏
添加一个TextView，填入文字，定义大小和颜色，设置背景颜色，有关于文字居中，我们要修改和添加一些配置信息。
在linearlayout中，我们修改gravity所对应的配置信息为center
在TextView中，我们修改layout_gravity所对应的配置信息为center_horizontal

背景颜色等颜色设置，都可以直接点击左边的小方块进行设置
在这里插入图片描述

中间页面
主页面设置为四个界面，即四个xml布局文件，每一个里面都设置一个TextView，居中显示即可
底部栏
设置一个水平放置的LinearLayout，在其下放入四个垂直的LinearLayout，每个垂直的LinearLayout下放置一个imagebutton后，再放一个TextView，慢慢拖动设置到满意的程度
修改layout_width，layout_weight，orientation直到达到预期效果
activity_main主布局文件
在activity_main里，首先在最外面设置垂直，配置orientation就行，配置以v开头就行。然后是将标题栏和底部栏放入，用include导入top和bottom，然后中间放入一个FrameLayout就可以了。
3.java文件编写
由于布局文件以及设置编写好了，我们需要编写控制代码逻辑的Java文件
这里最重要的是Fragment，这里我们需要对每一个Fragment（对应一个xml布局文件）新建一个Fragment类
ChatFragment.java
FriendsFragment.java
BookFragment.java
SettingFragment.java
在这里插入图片描述

按上图配置，每一个类相当于对应一个布局，这样我们就将四个布局所对应的xml文件就变成了四个类对象，从而可以正常的调用它。
在MainActivity.java中控制操作逻辑
首先要new出各个界面（Fragment）的对象，还有有一个FragmentManager管理所有的Fragment
private Fragment chatFragment = new ChatFragment();
private Fragment friendsFragment = new FriendsFragment();
private Fragment commFragment = new CommFragment();
private Fragment settingFragment = new SettingFragment();

并且创建一个Fragment管理变量
private FragmentManager fragmentManager;

新建一个initFragment函数用以给Fragment页面初始化，在此函数中，将此前定义个4个Fragment变量使用fragmentManager添加到activity_mainw文件的Framelayout布局中
private void initFragment(){
fragmentManager = getSupportFragmentManager();
FragmentTransaction
transaction = fragmentManager.beginTransaction();
transaction.add(R.id.content,chatFragment);
transaction.add(R.id.content,friendsFragment);
transaction.add(R.id.content,commFragment);
transaction.add(R.id.content,settingFragment);
transaction.commit();
}

对bottom.xml下的4个imagebutton控件和4个linearlayout控件建立8个变量
private LinearLayout chatLayout;
private LinearLayout friendsLayout;
private LinearLayout commLayout;
private LinearLayout settingLayout;

private ImageButton chatImageButton;
private ImageButton friendsImageButton;
private ImageButton commImageButton;
private ImageButton settingImageButton;

编写initview函数，将此8个变量和bottom中的8个控件联系起来，先使用findviewbyid函数找到对应的控件，再把它强制转换成对应的变量类型即可
private void initView(){
chatLayout = findViewById(R.id.chatLayout);
friendsLayout = findViewById(R.id.friendsLayout);
commLayout = findViewById(R.id.commLayout);
settingLayout = findViewById(R.id.settingLayout);

    chatImageButton = findViewById(R.id.chatImageButton);
    friendsImageButto = findViewById(R.id.friendsImageButton);
    commImageButton = findViewById(R.id.commImageButton);
    settingImageButton=findViewById(R.id.settingImageButton);

    chatText = findViewById(R.id.chatText);
    friendsText = findViewById(R.id.friendsText);
    commText = findViewById(R.id.commText);
    settingText = findViewById(R.id.settingText);
}

将所有的textview隐藏起来，通过点击每个图标给界面选择函数发送不同的参数，从而实现界面的选择，在界面选择函数中需要先将4个界面对应的textview控件都隐藏
private void hideFragment(FragmentTransaction transaction){
transaction.hide(chatFragment);
transaction.hide(friendsFragment);
transaction.hide(commFragment);
transaction.hide(settingFragment);
}
设置监听程序
public class MainActivity extends AppCompatActivity implements View.OnClickListener
点击图标后颜色变化，此方法的方法体的开始需要一个resetBtn函数，此函数作用为把xml文件中的4个图标都初始化为浅色的图标，然后等待选则的时候，再将对应的图片改为深色
@SuppressLint(“ResourceAsColor”)
private void resetBtn(){
chatImageButton.setImageResource(R.drawable.chat);
friendsImageButton.setImageResource(R.drawable.friends);
commImageButton.setImageResource(R.drawable.comm);
settingImageButton.setImageResource(R.drawable.setting);

    chatText.setTextColor(this.getResources().getColor(R.color.nopickText));
    friendsText.setTextColor(this.getResources().getColor(R.color.nopickText));
    commText.setTextColor(this.getResources().getColor(R.color.nopickText));
    settingText.setTextColor(this.getResources().getColor(R.color.nopickText));
}

仅仅对bottom的四个linerlayout监听
private void initEvent(){
chatLayout.setOnClickListener(this);
friendsLayout.setOnClickListener(this);
commLayout.setOnClickListener(this);
settingLayout.setOnClickListener(this);
}
在这里插入图片描述