微信界面的制作博客 201931106020201-卢腾-信息安全

我的gitte地址 lt/wechatjiemian

微信界面的制作要求：
1.界面分为三部分，上面是标题，中间显示内容，下面有四个小按钮
2.中间显示的内容随着下面按钮的选择而变化
3.点击下面按钮，按钮状态会变化     

   先创建一个bottom.xml文件

修改内容为WeChat

 之后在这个Linearlayout中添加textview和imagebutton（选中之前拖入drawable文件夹里的图标）

然后将这个Linearlayout单元copy三份总共四

但是它们位于同一个位置会被重叠无法查看，现在我们要将他们平均分成四份排列在Linearlayout中

 

采用lnclude的方法将其结合起

 此时主界面已经做好了，四个选项里面的内容暂时用一个textview代替，方法：创建四个xml文件，我这里命名为tab01,tab02,tab03,tab04，每个文件里添加一个textview，内容为“这里是微信/朋友/通讯录/设置界面”，后续我们会对里面的内容进行制作替换

 在java文件夹中创建四个Fragment文件，分别对应你的“微信”、“朋友”、“通讯录”、“设置”，我命名为WeChatBlankFragment、FrdBlankFragment、ContactBlankFragment、SettingsBlankFragment

然后进入MainActivity文件声明

在onCreate函数中调用所需要的函数

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    linearLayout_news=findViewById(R.id.id_tab_news);
    linearLayout_friends=findViewById(R.id.id_tab_friends);
    linearLayout_setting=findViewById(R.id.id_tab_setting);
    linearLayout_address=findViewById(R.id.id_tab_address);

    news_button = findViewById(R.id.id_tab_news_img);
    friends_button = findViewById(R.id.id_tab_friends_img);
    address_button = findViewById(R.id.id_tab_address_img);
    setting_button = findViewById(R.id.id_tab_setting_img);

    linearLayout_news.setOnClickListener(this);
    linearLayout_friends.setOnClickListener(this);
    linearLayout_setting.setOnClickListener(this);
    linearLayout_address.setOnClickListener(this);

    init_Fragment();

}

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

private void hide_Fragment(FragmentTransaction fragmentTransaction)
{
    fragmentTransaction.hide(news);
    fragmentTransaction.hide(friends);
    fragmentTransaction.hide(address);
    fragmentTransaction.hide(setting);
}

@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;

    }

}

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

执行结果如图