1.创建一个主类WSHomeActivity继承了 FragmentActivity
2.在引入的布局文件activity_home_ws来设置控件的布局
3.自定义控件RadioButton来实现(按钮+文字)的控件
4.在xml文件attrs中 <!-- 进行属性声明 格式(尺寸、参照) -->
效果图:
/**
* 完善项目APP主页面 (用FragmentManager实现tab,不可滑动)
*/
public class WSHomeActivity extends FragmentActivity {
private Context mContext;
private RequestManager requestManager;
private RadioGroup radioGroup;
private CustomRadioButton rbRecord;
private FragmentManager fragmentManager;
private AppBaseFragment[] mTabs = new AppBaseFragment[5];
// fragment
private FragmentHomePage mFragmentHomePage = new FragmentHomePage();// 首页
private FragmentMonitor mFragmentMonitor = new FragmentMonitor();// 监控
private FragmentRecord mFragmentRecord = new FragmentRecord();// 记录
private FragmentMall mFragmentMall = new FragmentMall();// 商城
private FragmentMore mFragmentMore = new FragmentMore();// 更多
private int selectTabIdx = 0;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mContext = this;
initViews(savedInstanceState);
}
private void initViews(Bundle savedInstanceState) {
setContentView(R.layout.activity_home_ws);
radioGroup = (RadioGroup) findViewById(R.id.home_radioGroup);
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.home_tab_homePage:
setTabSelection(0);
break;
case R.id.home_tab_monitor:
setTabSelection(1);
break;
case R.id.home_tab_record:
setTabSelection(2);
break;
case R.id.home_tab_mall:
setTabSelection(3);
break;
case R.id.home_tab_more:
setTabSelection(4);
break;
}
}
});
radioGroup.check(R.id.home_tab_phone);
rbRecord = (CustomRadioButton) findViewById(R.id.home_tab_record);
}
/**
* 选择tab
*/
private void setTabSelection(int index) {
// 开启一个Fragment事务
FragmentTransaction transaction = fragmentManager.beginTransaction();
switch (index) {
case 0:
if (mTabs[index] == null) {
mTabs[index] = mFragmentHomePage;
transaction.add(R.id.fragment_container, mTabs[index]);
}
break;
case 1:
if (mTabs[index] == null) {
mTabs[index] = mFragmentMonitor;
transaction.add(R.id.fragment_container, mTabs[index]);
}
break;
case 2:
if (mTabs[index] == null) {
mTabs[index] = mFragmentRecord;
transaction.add(R.id.fragment_container, mTabs[index]);
}
break;
case 3:
if (mTabs[index] == null) {
mTabs[index] = mFragmentMall;
transaction.add(R.id.fragment_container, mTabs[index]);
}
break;
case 4:
if (mTabs[index] == null) {
// mTabs[index] = mFragmentMore;
mTabs[index] = mFragmentMore;
transaction.add(R.id.fragment_container, mTabs[index]);
}
break;
}
// 先隐藏掉所有的Fragment,以防止有多个Fragment显示在界面上的情况
hideFragments(transaction);
transaction.show(mTabs[index]);
transaction.commit();
selectTabIdx = index;
}
/**
* 将所有的Fragment都置为隐藏状态。
*
* @param transaction
* 用于对Fragment执行操作的事务
*/
private void hideFragments(FragmentTransaction transaction) {
for (AppBaseFragment appBaseFragment : mTabs) {
if (appBaseFragment != null) {
transaction.hide(appBaseFragment);
}
}
}
}
布局文件
activity_home_ws
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:leelen="http://schemas.android.com/apk/res/com.leelen.cloud" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/home_center_bg" android:orientation="vertical" > <!-- leelen地址为Manifest中的包名 --> <FrameLayout android:id="@+id/fragment_container" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="@android:color/white" /> <View android:layout_width="match_parent" android:layout_height="0.5dp" android:background="@color/divider1" /> <RadioGroup android:id="@+id/home_radioGroup" android:layout_width="match_parent" android:layout_height="@dimen/home_tab_height" android:background="@color/home_tab_bg" android:gravity="center_vertical" android:orientation="horizontal" > <!-- 首页 --> <!-- 自定义一个按钮控件,图标+图标正下方为文字 --> <com.leelen.cloud.ui.CustomRadioButton android:id="@+id/home_tab_homePage" android:layout_width="0px" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:clickable="true" android:gravity="center" android:text="@string/homePage" android:textColor="@color/selector_txt_btn_1" android:textSize="@dimen/home_tab_textSize" leelen:drawableSize="@dimen/home_tab_drawableSize" leelen:drawableTop="@drawable/selector_tab_firstpage" /> <!-- 监控 --> <com.leelen.cloud.ui.CustomRadioButton android:id="@+id/home_tab_monitor" android:layout_width="0px" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:clickable="true" android:gravity="center" android:text="@string/monitor" android:textColor="@color/selector_txt_btn_1" android:textSize="@dimen/home_tab_textSize" leelen:drawableSize="@dimen/home_tab_drawableSize" leelen:drawableTop="@drawable/selector_tab_monitor" /> <!-- 记录 --> <com.leelen.cloud.ui.CustomRadioButton android:id="@+id/home_tab_record" android:layout_width="0px" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:clickable="true" android:gravity="center" android:text="@string/record" android:textColor="@color/selector_txt_btn_1" android:textSize="@dimen/home_tab_textSize" leelen:drawableSize="@dimen/home_tab_drawableSize" leelen:drawableTop="@drawable/selector_tab_record" /> <!-- 商城 --> <com.leelen.cloud.ui.CustomRadioButton android:id="@+id/home_tab_mall" android:layout_width="0px" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:clickable="true" android:gravity="center" android:text="@string/mall" android:textColor="@color/selector_txt_btn_1" android:textSize="@dimen/home_tab_textSize" leelen:drawableSize="@dimen/home_tab_drawableSize" leelen:drawableTop="@drawable/selector_tab_mall" /> <!-- 更多 --> <com.leelen.cloud.ui.CustomRadioButton android:id="@+id/home_tab_more" android:layout_width="0px" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:clickable="true" android:gravity="center" android:text="@string/more" android:textColor="@color/selector_txt_btn_1" android:textSize="@dimen/home_tab_textSize" leelen:drawableSize="@dimen/home_tab_drawableSize" leelen:drawableTop="@drawable/selector_tab_more" /> </RadioGroup> </LinearLayout>
自定义控件
CustomRadioButton
public class CustomRadioButton extends RadioButton { private int mDrawableSize;// xml文件中设置的大小 private boolean showDot = false; public CustomRadioButton(Context context) { this(context, null, 0); } public CustomRadioButton(Context context, AttributeSet attrs) { this(context, attrs, 0); } public CustomRadioButton(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); Drawable drawableLeft = null, drawableTop = null, drawableRight = null, drawableBottom = null; TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CustomRadioButton); int n = a.getIndexCount(); for (int i = 0; i < n; i++) { int attr = a.getIndex(i); // LogUtils.i("CustomRadioButton", "attr:" + attr); switch (attr) { case R.styleable.CustomRadioButton_drawableSize: mDrawableSize = a.getDimensionPixelSize(R.styleable.CustomRadioButton_drawableSize, 50); // LogUtils.i("CustomRadioButton", "mDrawableSize:" + mDrawableSize); break; case R.styleable.CustomRadioButton_drawableTop: drawableTop = a.getDrawable(attr); break; case R.styleable.CustomRadioButton_drawableRight: drawableRight = a.getDrawable(attr); break; case R.styleable.CustomRadioButton_drawableBottom: drawableBottom = a.getDrawable(attr); break; case R.styleable.CustomRadioButton_drawableLeft: drawableLeft = a.getDrawable(attr); break; default: break; } } a.recycle(); setCompoundDrawablesWithIntrinsicBounds(drawableLeft, drawableTop, drawableRight, drawableBottom); } @Override public void setCompoundDrawablesWithIntrinsicBounds(Drawable left, Drawable top, Drawable right, Drawable bottom) { if (left != null) { left.setBounds(0, 0, mDrawableSize, mDrawableSize); } if (right != null) { right.setBounds(0, 0, mDrawableSize, mDrawableSize); } if (top != null) { top.setBounds(0, 0, mDrawableSize, mDrawableSize); } if (bottom != null) { bottom.setBounds(0, 0, mDrawableSize, mDrawableSize); } setCompoundDrawables(left, top, right, bottom); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (showDot) { Paint paint = new Paint(); paint.setColor(Color.RED); paint.setAntiAlias(true); float radius = 10; float cx = getWidth() / 2 + 30; float cy = radius; canvas.drawCircle(cx, cy, radius, paint); } } public void setShowDot(boolean showDot) { this.showDot = showDot; postInvalidate(); } }
<!-- 进行属性声明 格式(尺寸、参照) -->
attrs
<?xml version="1.0" encoding="utf-8"?> <resources> <!-- 进行属性声明 格式(尺寸、参照) --> <declare-styleable name="CustomRadioButton"> <attr name="drawableSize" format="dimension" /> <attr name="drawableTop" format="reference" /> <attr name="drawableBottom" format="reference" /> <attr name="drawableLeft" format="reference" /> <attr name="drawableRight" format="reference" /> </declare-styleable> <declare-styleable name="CheckImageButton"> <attr name="checked" format="boolean" /> </declare-styleable> </resources>