Android仿qq顶部消息栏效果

2019-10-22 18:13:04

字体：大中小

来源：转载

供稿：网友

android仿照qq的顶部栏效果，主要就是利用fragment manager把fragment设置显示内容

（1）在activity_main.xml布局中添加控件

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  xmlns:tools="http://schemas.android.com/tools"  android:layout_width="match_parent"  android:layout_height="match_parent">  <LinearLayout    android:id="@+id/ll_qqtop"    android:layout_width="match_parent"    android:layout_height="50dp"    android:orientation="horizontal"    android:gravity="center"    android:background="@color/whites">    <LinearLayout      android:id="@+id/common_constact"      android:layout_height="40dp"      android:layout_width="150dp"      android:orientation="horizontal"      android:layout_centerHorizontal="true"      android:layout_alignParentTop="true">      <Button        android:id="@+id/constact_group"        android:layout_height="match_parent"        android:layout_width="0dp"        android:layout_weight="1"        android:padding="5dp"        android:textSize="16sp"        android:button="@null"        android:checked="true"        android:background="@drawable/qq_contact_group"        android:textColor="@drawable/qq_constact_font"        android:text="消息"/>      <Button        android:button="@null"        android:id="@+id/constact_all"        android:layout_width="0dp"        android:layout_height="match_parent"        android:layout_weight="1"        android:textSize="16sp"        android:padding="5dp"        android:background="@drawable/qq_contact_all"        android:textColor="@drawable/qq_constact_font"        android:text="电话"/>    </LinearLayout>  </LinearLayout>  <FrameLayout    android:id="@+id/id_content"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:layout_below="@+id/ll_qqtop" /></RelativeLayout>

（2）在drawable中添加样式文件，包括字体颜色和背景

2.1.在drawable文件夹中新建一个文件：qq_contact_group.xml，这个是左边按钮的背景样式xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">  <item android:state_enabled="false"><shape>    <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="0dp" android:topLeftRadius="5dp" android:topRightRadius="0dp" />    <solid android:color="@color/blue" />    <stroke android:width="1dp" android:color="@color/blue" />  </shape>  </item>  <item android:state_pressed="true"><shape>    <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="0dp" android:topLeftRadius="5dp" android:topRightRadius="0dp" />    <solid android:color="@color/whites" />    <stroke android:width="1dp" android:color="@color/whites" />  </shape>  </item>  <item><shape>    <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="0dp" android:topLeftRadius="5dp" android:topRightRadius="0dp" />    <solid android:color="@color/whites" />    <stroke android:width="1dp" android:color="@color/blue" />  </shape>  </item></selector>

2.2在drawable文件夹中新建一个文件：qq_contact_all.xml，这个是右边按钮的背景样式xml

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">  <item android:state_enabled="false"><shape>    <corners android:bottomLeftRadius="0dp" android:bottomRightRadius="5dp" android:topLeftRadius="0dp" android:topRightRadius="5dp" />    <solid android:color="@color/blue" />    <stroke android:width="1dp" android:color="@color/blue" />  </shape>  </item>  <item android:state_pressed="true"><shape>    <corners android:bottomLeftRadius="0dp" android:bottomRightRadius="5dp" android:topLeftRadius="0dp" android:topRightRadius="5dp" />    <solid android:color="@color/blue" />    <stroke android:width="1dp" android:color="@color/blue" />  </shape>  </item>  <item><shape>    <corners android:bottomLeftRadius="0dp" android:bottomRightRadius="5dp" android:topLeftRadius="0dp" android:topRightRadius="5dp" />    <solid android:color="@color/whites" />    <stroke android:width="1dp" android:color="@color/blue" />  </shape>  </item></selector>

3.在drawable文件夹中新建一个文件：qq_constact_font.xml，这个是两个按钮的文字样式xml，不选中为白色，选中为蓝色

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" >  <item android:state_pressed="true" android:color="@color/whites"/>  <item android:state_enabled="false" android:color="@color/whites"/>  <item android:color="@color/blue"/></selector>

（3）在MainActivity中设置按钮的选中情况，并且在fragmentManager中调用fragment

public class MainActivity extends Activity implements View.OnClickListener {  //参考网址：https://blog.csdn.net/u010585448/article/details/48543883  private Button title_left_btn , title_right_btn;  /**   * Fragment管理器   */  private android.app.FragmentManager mFragmentManager;  private FragmentTransaction mTransaction;  /**   * 两个Fragment   */  private LeftFragment mLFragment ;  private RightFragment mRFragment;  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    initView();  }  private void initView() {    // TODO Auto-generated method stub    title_left_btn = (Button)findViewById(R.id.constact_group);    title_right_btn = (Button)findViewById(R.id.constact_all);    title_left_btn.setOnClickListener(this);    title_left_btn.performClick();//模拟点击事件，使左边按钮被点击    mFragmentManager = getFragmentManager();    mTransaction = mFragmentManager.beginTransaction();    mLFragment = new LeftFragment();    mTransaction.replace(R.id.id_content, mLFragment);    mTransaction.commit();    title_right_btn.setOnClickListener(this);  }  @Override  public void onClick(View v) {    // TODO Auto-generated method stub    switch (v.getId()) {      case R.id.constact_group:        if(title_left_btn.isEnabled()){          title_left_btn.setEnabled(false);          title_right_btn.setEnabled(true);        }        mFragmentManager = getFragmentManager();        mTransaction = mFragmentManager.beginTransaction();        if(mLFragment == null){          mLFragment = new LeftFragment();        }        mTransaction.replace(R.id.id_content, mLFragment);        mTransaction.commit();        break;      case R.id.constact_all:        if(title_right_btn.isEnabled()){          title_left_btn.setEnabled(true);          title_right_btn.setEnabled(false);        }        mFragmentManager = getFragmentManager();        mTransaction = mFragmentManager.beginTransaction();        if(mRFragment == null){          mRFragment = new RightFragment();        }        mTransaction.replace(R.id.id_content, mRFragment);        mTransaction.commit();        break;    }  }}

最后，简单贴一下fragment吧

public class LeftFragment extends android.app.Fragment {  @Override  public View onCreateView(LayoutInflater inflater, ViewGroup container,               Bundle savedInstanceState) {    return inflater.inflate(R.layout.left_fragment, container , false);  }}

实现效果图：

android,消息栏