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,消息欄