AS实现微信布局切换

项目效果展示

实现微信的底部按钮切换

项目环境

• AS3.5.2
• API 21:Android 5.0

项目步骤

开始前

• 将模式改为非兼容
  extends Activity

• 消除App左上角的title

  import android.view.Window;
  
  super.onCreate(savedInstanceState);
  requestWindowFeature(Window.FEATURE_NO_TITLE);
  setContentView(R.layout.activity_main);
  

• 将项目需要用到的图标放到res->drawable

编写所有的layout文件

这里不多赘述，主要写一下流程及可能碰到的坑

• top.xml很简单只有一个文本框

• 四个tab.xml也只有一个文本框，即中间要显示的页面

• bottom.xml稍微复杂一点，里面放了四个LinearLayout，分别放了一个ImageButton和一个TextView

  android:gravity="center" //只有选择这个下面的文字才能居中，而不是layout_gravity
  
  android:clickable="false" //小控件配置一个这个才能最后实现区域点击
  
  android:src="@drawable/tab_weixin_pressed"//这是正确版本 兼容版本显示不出图片
  app:srcCompat="@drawable/tab_weixin_pressed"
  

• activity_main.xml

  <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" />
  

  将上下两个layout插进来，中间模块的layout可以层叠

编写所有的Java文件

创建Fragment文件

• 创建一个空白的Fragment（别的不要，同时生成一个xml，一会儿删掉）

• ->refactor->rename

• 更新一下layout的指向

  return inflater.inflate(R.layout.tab01, container, false);
  

• 这里引用的包要更换

  import android.app.Fragment;
  

  包括MainActivity里的这个包也要更换
  事实上Androidx更好更新

• 通过Fragment把xml作为对象来进行控制

写MainActivity里的代码

• 创建Fragment对象

  private Fragment mTab01 = new weixinFragment();
  private Fragment mTab02 = new frdFragment();
  private Fragment mTab03 = new contactFragment();
  private Fragment mTab04 = new settingsFragment();
  

• 初始化FragmentManager

  private FragmentManager fm;
  
  private void initFragment(){
          fm = getFragmentManager();
          FragmentTransaction transaction = fm.beginTransaction();
          transaction.add(R.id.id_content,mTab01);
          transaction.add(R.id.id_content,mTab02);
          transaction.add(R.id.id_content,mTab03);
          transaction.add(R.id.id_content,mTab04);
          transaction.commit();
      }
  

• 创建LinearLayout对象和ImageButton对象

  private LinearLayout mTabWeixin;
  private LinearLayout mTabFrd;
  private LinearLayout mTabAddress;
  private LinearLayout mTabSettings;
  
  private ImageButton mImgWeixin;
  private ImageButton mImgFrd;
  private ImageButton mImgAddress;
  private ImageButton mImgSettings;
  

• 初始化视图

  private void initView(){
      mTabWeixin = (LinearLayout)findViewById(R.id.id_tab_weixin);
      mTabFrd = (LinearLayout)findViewById(R.id.id_tab_frd);
      mTabAddress=(LinearLayout)findViewById(R.id.id_tab_contact);
      mTabSettings=(LinearLayout)findViewById(R.id.id_tab_settings);
  
      mImgWeixin=(ImageButton)findViewById(R.id.id_tab_weixin_img);
      mImgFrd=(ImageButton)findViewById(R.id.id_tab_frd_img);
      mImgAddress=(ImageButton)findViewById(R.id.id_tab_contact_img);
      mImgSettings=(ImageButton)findViewById(R.id.id_tab_settings_img);
  }
  

• 写一个函数，隐藏所有的中间的部分叠加的文字，为下一个函数做准备

  private void hideFragment(FragmentTransaction transaction){
      transaction.hide(mTab01);
      transaction.hide(mTab02);
      transaction.hide(mTab03);
      transaction.hide(mTab04);
  }
  

• 设置一个i来控制切换，选到谁，谁的图标就亮，并显示对应的文字

  private void selectFragment(int i){
      FragmentTransaction transaction = fm.beginTransaction();
      hideFragment(transaction);
      //把图片设置为亮的
      //设置内容区域
      switch (i){
          case 0:
              Log.d("setSelect","1");
              transaction.show(mTab01);
              mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);
              break;
          case 1:
              Log.d("setSelect","2");
              transaction.show(mTab02);
              mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);
              break;
          case 2:
              Log.d("setSelect","3");
              transaction.show(mTab03);
              mImgAddress.setImageResource(R.drawable.tab_address_pressed);
              break;
          case 3:
              Log.d("setSelect","4");
              transaction.show(mTab04);
              mImgSettings.setImageResource(R.drawable.tab_settings_pressed);
              break;
          default:
              break;
      }
      transaction.commit();
  }
  

• 建立一个全活动的点击监听

  public class MainActivity extends Activity implements View.OnClickListener
      
  //要重写onClick函数，否则会报错
  

• 写一个所有图标变灰色的函数

  public void resetImages(){
      mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);
      mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);
      mImgAddress.setImageResource(R.drawable.tab_address_normal);
      mImgSettings.setImageResource(R.drawable.tab_settings_normal);
  }
  

• 重写onClick函数，点击切换

  @Override
  public void onClick(View view) {
      Log.d("onClick","1");
      resetImages();
      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;
          default:
              break;
      }
  }
  

• 全屏监听很耗内存，将监听优化到局部

  private void initEvent(){
      mTabWeixin.setOnClickListener(this);
      mTabFrd.setOnClickListener(this);
      mTabAddress.setOnClickListener(this);
      mTabSettings.setOnClickListener(this);
  }
  

• 展示一下onCreate函数

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      requestWindowFeature(Window.FEATURE_NO_TITLE);
      setContentView(R.layout.activity_main);
  
      initView();
      initFragment();
      initEvent();
      selectFragment(0);
  }
  

结语

本项目重点运用了Fragment以及学习了怎样进行切换，现将代码附后。

MyWeChat|Gitee