2021-10-09

APP门户界面设计（微信界面）

技术：使用布局（layouts）和分段（fragment），对控件进行点击监听；
布局设计
 此仿微信界面分为三部分，标题栏，中间内容页面，底部栏，故分部分进行设计。
标题栏

添加一个TextView，填入文字，定义大小和颜色，设置背景颜色，有关于文字居中，我们要修改和添加一些配置信息。
 在linearlayout中，我们修改gravity所对应的配置信息为center
.java文件编写
 由于布局文件以及设置编写好了，我们需要编写控制代码逻辑的Java文件
这里最重要的是Fragment，这里我们需要对每一个Fragment（对应一个xml布局文件）新建一个Fragment类
ChatFragment.java
FriendsFragment.java
BookFragment.java
SettingFragment.java
1.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;

编写initview函数，将此8个变量和bottom中的8个控件联系起来

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);
}

设置监听程序

public class MainActivity extends AppCompatActivity implements View.OnClickListener
@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));
}

实现效果:

已将代码上创git仓库
代码仓库