目录
一、设计界面：top.xml
二、设计界面：bottom.xml
三、创建Fragment（eg：fragment_chat）
四、整体布局：activity_main.xml
五、功能实现：MainActivity
0、文件声明，导入等
1、onCreate()
2、initFragment()：添加界面
3、initView()：视图选择
4、initEvent()：事件触发
5、selectFragment()：点击时更改图标
6、hidefragment()：令未被选中的三个选项区恢复默认
7、onClick()：触发点击
8、resetImg()：提供默认图标的图像
六、效果展示
1、页面1-chat
2、页面2-friends
3、页面3-circle
4、页面4-setting
七、仓库地址
八、附件：图标
一、设计界面：top.xml
设计中发现界面上方有一个自带的标题框，需要在app/java/MainActivity中onCreat函数中添加如下代码去除：
if (getSupportActionBar()!=null)
{
getSupportActionBar().hide();
}
去除自带的标题框后，设计效果及代码如下：
android:layout_width="match_parent" android:layout_height="65dp" android:gravity="center" android:background="#000000" android:orientation="vertical"> android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_weight="1" android:text="WeChat" android:textColor="#ffffff" android:textSize="40sp"/>
二、设计界面：bottom.xml
此处以chat为例，设计效果代码如下：
android:id="@+id/tab_chat" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="vertical" android:layout_gravity="bottom"> android:id="@+id/imageButton_chat" android:layout_width="match_parent" android:layout_height="80dp" android:background="#ffffff" android:src="@drawable/icon_chat" android:clickable="false" /> android:id="@+id/textView2_chat" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:saveEnabled="false" android:text="chat" android:textColor="#000000" android:textSize="15sp" /> 其中，bottom.xml文件中：android:clickable="false"这句是为了将图标和图标下方的字体在点击触发时捆绑。 三、创建Fragment（eg：fragment_chat） xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/id_chat" tools:context=".Fragment_chat"> android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:saveEnabled="false" android:text="This is chat." android:textColor="#000000" android:textSize="60sp" /> 四、整体布局：activity_main.xml 在activity_main.xml文件中体现，通过include标签引入top.xml和bottom.xml布局文件。设计代码及效果如下： android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> android:id="@+id/actmain" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1"> layout="@layout/bottom_layout" android:layout_width="match_parent" android:layout_height="wrap_content" /> 五、功能实现：MainActivity 0、文件声明，导入等 package top.binbin.work2; import androidx.appcompat.app.AppCompatActivity; import androidx.fragment.app.Fragment; import androidx.fragment.app.FragmentManager; import androidx.fragment.app.FragmentTransaction; import android.os.Bundle; import android.util.Log; import android.view.View; import android.widget.ImageButton; import android.widget.LinearLayout; public class MainActivity extends AppCompatActivity implements View.OnClickListener { private Fragment fragment_chat = new Fragment_chat(); private Fragment fragment_firends = new Fragment_friends(); private Fragment fragment_circle = new Fragment_circle(); private Fragment fragment_setting = new Fragment_setting(); private LinearLayout tabchat; private LinearLayout tabfriends; private LinearLayout tabcircle; private LinearLayout tabsetting; private ImageButton imgchat; private ImageButton imgfriends; private ImageButton imgcircle; private ImageButton imgsetting; private FragmentManager fm; 1、onCreate() 其中 initFragment() ; initView() ; initEvent() ; selectFragment(0) ;的定义将在下文说明 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); if (getSupportActionBar()!=null) { getSupportActionBar().hide(); } setContentView(R.layout.activity_main); initFragment(); initView(); initEvent(); selectFragment(0); 2、initFragment()：添加界面 private void initFragment() { fm = getSupportFragmentManager(); FragmentTransaction transaction = fm.beginTransaction(); transaction.add(R.id.actmain, fragment_chat); transaction.add(R.id.actmain, fragment_firends); transaction.add(R.id.actmain, fragment_circle); transaction.add(R.id.actmain, fragment_setting); transaction.commit(); 3、initView()：视图选择 private void initView() { tabchat = (LinearLayout) findViewById(R.id.tab_chat); tabfriends = (LinearLayout) findViewById(R.id.tab_friends); tabcircle = (LinearLayout) findViewById(R.id.tab_circle); tabsetting = (LinearLayout) findViewById(R.id.tab_setting); imgchat = (ImageButton) findViewById(R.id.imageButton_chat); imgfriends = (ImageButton) findViewById(R.id.imageButton_friends); imgcircle = (ImageButton) findViewById(R.id.imageButton_circle); imgsetting = (ImageButton) findViewById(R.id.imageButton_setting); } 4、initEvent()：事件触发 private void initEvent() { imgchat.setOnClickListener(this); imgfriends.setOnClickListener(this); imgcircle.setOnClickListener(this); imgsetting.setOnClickListener(this); } 5、selectFragment()：点击时更改图标 private void selectFragment(int i) { FragmentTransaction transaction = fm.beginTransaction(); hideFragment(transaction); //把图片设置为亮的 //设置内容区域 switch (i) { case 0: transaction.show(fragment_chat); imgchat.setImageResource(R.drawable.icon_chat2); break; case 1: transaction.show(fragment_firends); imgfriends.setImageResource(R.drawable.icon_friends2); break; case 2: transaction.show(fragment_circle); imgcircle.setImageResource(R.drawable.icon_circle2); break; case 3: transaction.show(fragment_setting); imgsetting.setImageResource(R.drawable.icon_setting2); break; default: break; } transaction.commit(); } 6、hidefragment()：令未被选中的三个选项区恢复默认 private void hideFragment (FragmentTransaction transaction) { transaction.hide(fragment_chat); transaction.hide(fragment_firends); transaction.hide(fragment_circle); transaction.hide(fragment_setting); } 7、onClick()：触发点击 public void onClick (View v){ resetImgs(); Log.d("int", String.valueOf(v.getId())); switch ((int) v.getId()) { case 2131230911: Log.d("Click","0"); selectFragment(0); break; case 2131230913: selectFragment(1); break; case 2131230912: selectFragment(2); break; case 2131230914: selectFragment(3); break; default: break; } } 8、resetImg()：提供默认图标的图像 private void resetImgs() { imgchat.setImageResource(R.drawable.icon_chat); imgfriends.setImageResource(R.drawable.icon_friends); imgcircle.setImageResource(R.drawable.icon_circle); imgsetting.setImageResource(R.drawable.icon_setting); } 六、效果展示 （默认图标是彩色的，点击触发后是黑白色的） 1、页面1-chat 2、页面2-friends 3、页面3-circle 4、页面4-setting 七、仓库地址 我是仓库 八、附件：图标 点击前（彩色）： 点击后（黑白色）： 好文推荐
您阅读本篇文章共花了：
发表评论