目录
成果：
界面设计：
bottom：
top：
main：
JAVA
界面优化：
成果：
界面设计：
界面布局方面主要由顶部的top和下面的bottom和中间的main组成。
bottom：
bottom里面是一个大的LinearLayout里面包含四个小的LinearLayout，每个LinearLayout里面放一个图片imageview和一个textview，分别对应着聊天，看点，联系人和设置四个的图标和文本。每个设置下颜色，大小，位置等等。
263+
top：
其次是top，里面一个LinearLayout里面加一个textview。然后设置下位置及字大小。效果如下：
main：
最后将bottom和top放入main中。顺便在里面放一个Framlayout。得到界面。
JAVA
其次是fragment方面，界面上有聊天，看点，联系人，设置四个片段，也就是说要写四个fragment以及一个主的java文件。
四个fagment文件创建后，取聊天为例子，java不变，layout如图所示。
四个文件分别命名为fragment_talk,fragment_new,fragment_friend,fragment_setting。分别对应聊天，看点，联系人，设置四个选项。
最后是mainactivity文件。
先定义：
private FragmentManager fragmentManager;
private Fragment Fragment_talk = new fragment_talk();
private Fragment Fragment_new = new fragment_new();
private Fragment Fragment_friend = new fragment_friend();
private Fragment Fragment_setting = new fragment_setting();
private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;
private ImageView imageView1,imageView2,imageView3,imageView4;
private TextView textView1,textView2,textView3,textView4;
然后取出对应：
private void initFragment()
{
fragmentManager=getFragmentManager();
FragmentTransaction transaction =fragmentManager.beginTransaction();
transaction.add(R.id.id_content,Fragment_talk);
transaction.add(R.id.id_content,Fragment_new);
transaction.add(R.id.id_content,Fragment_friend);
transaction.add(R.id.id_content,Fragment_setting);
transaction.commit();
}
最后展示加监听（监听是很重要的，因为要时时刻刻对界面进行监听反馈来触发按动转换）：
private void showfragment(int i) {
FragmentTransaction transaction=fragmentManager.beginTransaction();
hideFragment(transaction);
switch (i){
case 0:
transaction.show(Fragment_talk);
break;
case 1:
transaction.show(Fragment_new);
break;
case 2:
transaction.show(Fragment_friend);
break;
case 3:
transaction.show(Fragment_setting);
break;
default:
break;
}
transaction.commit();
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.liaotian:
showfragment(0);
break;
case R.id.kandian:
showfragment(1);
break;
case R.id.lianxiren:
showfragment(2);
break;
case R.id.shezhi:
showfragment(3);
break;
default:
break;
}
}
界面优化：
虽然成功实现功能，但是没有做到切换时能有光暗效果，现在来做一下优化。
private void changeColor(int i) //创建改变颜色的函数
{
imageView1.setImageResource(R.drawable.talk2);
imageView2.setImageResource(R.drawable.new2);
imageView3.setImageResource(R.drawable.friend2);
imageView4.setImageResource(R.drawable.setting2);
textView1.setTextColor(Color.rgb(255, 255, 255));
textView2.setTextColor(Color.rgb(255, 255, 255));
textView3.setTextColor(Color.rgb(255, 255, 255));
textView4.setTextColor(Color.rgb(255, 255, 255));
switch (i) {
case 0:
imageView1.setImageResource(R.drawable.talk2);
textView1.setTextColor(Color.rgb(18, 150, 219));
break;
case 1:
imageView2.setImageResource(R.drawable.new2);
textView2.setTextColor(Color.rgb(18, 150, 219));
break;
case 2:
imageView3.setImageResource(R.drawable.friend2);
textView3.setTextColor(Color.rgb(18, 150, 219));
break;
case 3:
imageView4.setImageResource(R.drawable.setting2);
textView4.setTextColor(Color.rgb(18, 150, 219));
break;
default:
break;
}
}
加入changecolor后，之前的代码中也要加入该函数，最后变成如下：
public void onClick(View v) {
switch (v.getId()) {
case R.id.liaotian:
showfragment(0);
changeColor(0);
break;
case R.id.kandian:
showfragment(1);
changeColor(1);
break;
case R.id.lianxiren:
showfragment(2);
changeColor(2);
break;
case R.id.shezhi:
showfragment(3);
changeColor(3);
break;
default:
break;
}
}
最后附上源码仓库地址：
花如锦/funnyguy
