仿QQ頂部圓角頁面切換Button
阿新 • • 發佈:2019-01-05
實現效果,可點選切換。
一.佈局檔案
activity_main.xml
left_fragment.xml<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" tools:context="com.example.slidetabdemo.MainActivity" > <LinearLayout android:id="@+id/common_constact" android:layout_height="wrap_content" android:layout_width="150dp" android:orientation="horizontal" android:layout_centerHorizontal="true" android:layout_alignParentTop="true" android:background="@drawable/ll_top_bg"> <Button android:id="@+id/constact_group" style="@style/top_group" android:text="分組"/> <Button android:id="@+id/constact_all" style="@style/top_all" android:text="全部"/> </LinearLayout> <View android:id="@+id/divider_view" android:layout_below="@id/common_constact" android:layout_width="match_parent" android:layout_height="2dp" android:background="#bdbdbd"/> <FrameLayout android:id="@+id/id_content" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_below="@id/divider_view" ></FrameLayout> </RelativeLayout>
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_gravity="center" android:id="@+id/left_fragment" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="left_fragment" android:textSize="20sp" ></TextView> </LinearLayout>
right_fragment.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_gravity="center" android:id="@+id/right_fragment" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="right_fragment" android:textSize="20sp" ></TextView> </LinearLayout>
二.button圓角,邊框格式,以及button背景色等的設定,在res資料夾下的styles.xml中設定
styles.xml
<resources>
<!--
Base application theme, dependent on API level. This theme is replaced
by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
-->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
<!--
Theme customizations available in newer API levels can go in
res/values-vXX/styles.xml, while customizations related to
backward-compatibility can go here.
-->
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>
<style name="top_group">
<item name="android:layout_height">30dp</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_weight">1</item>
<item name="android:textSize">16sp</item>
<item name="android:textColor">@drawable/qq_constact_font</item>
<item name="android:background">@drawable/qq_constact_group</item>
</style>
<style name="top_all">
<item name="android:layout_height">30dp</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_weight">1</item>
<item name="android:textSize">16sp</item>
<item name="android:textColor">@drawable/qq_constact_font</item>
<item name="android:background">@drawable/qq_constact_all</item>
</style>
</resources>
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="blue">#499BF7</color>
<color name="whites">#ffffff</color>
</resources>
drwable資料夾下的一些.xml檔案
ll_top_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<corners android:radius="5dp"/>
<solid android:color="#FFFFFF"/>
<stroke android:width="1dp" android:color="@color/blue"/>
</shape>
qq_contact_all.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>
qq_contact_font.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>
qq_contact_group.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/blue" />
<stroke android:width="1dp" android:color="@color/blue" />
</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>
以上是一些樣式的設定,以及點選事件樣式改變的設定
三.Java程式碼
MainActivity.java
package com.example.slidetabdemo;
import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
public class MainActivity extends Activity implements OnClickListener{
private Button title_left_btn , title_right_btn;
/**
* Fragment管理器
*/
private 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;
}
}
}
LeftFragment.java
package com.example.slidetabdemo;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class LeftFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return inflater.inflate(R.layout.left_fragment, container , false);
//return super.onCreateView(inflater, container, savedInstanceState);
}
}
RightFragment.java
package com.example.slidetabdemo;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class RightFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return inflater.inflate(R.layout.right_fragment, container, false);
// return super.onCreateView(inflater, container, savedInstanceState);
}
}
完成