版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。
系列教程：Android開發(fā)之從零開始系列
源碼：github.com/AnliaLee/ExpandMenu，歡迎star大家要是看到有錯(cuò)誤的地方或者有啥好的建議，歡迎留言評論
前言：最近項(xiàng)目里要實(shí)現(xiàn)一個(gè) 可展開收起的水平菜單欄控件，剛接到需求時(shí)想著用自定義View自己來繪制，發(fā)現(xiàn)要實(shí)現(xiàn) 圓角、陰影、菜單滑動等效果非常復(fù)雜且耗時(shí)間。好在這些效果 Android原生代碼中都已經(jīng)有非常成熟的解決方案，我們只需要去繼承它們進(jìn)行 二次開發(fā)就行。本期將教大家如何繼承 ViewGroup（RelativeLayout）實(shí)現(xiàn)自定義菜單欄
本篇只著重于思路和實(shí)現(xiàn)步驟，里面用到的一些知識原理不會非常細(xì)地拿來講，如果有不清楚的api或方法可以在網(wǎng)上搜下相應(yīng)的資料，肯定有大神講得非常清楚的，我這就不獻(xiàn)丑了。本著認(rèn)真負(fù)責(zé)的精神我會把相關(guān)知識的博文鏈接也貼出來（其實(shí)就是懶不想寫那么多哈哈），大家可以自行傳送。為了照顧第一次閱讀系列博客的小伙伴，本篇會出現(xiàn)一些在之前系列博客就講過的內(nèi)容，看過的童鞋自行跳過該段即可
國際慣例，先上效果圖
目錄
- 為菜單欄設(shè)置背景
- 繪制菜單欄按鈕
- 設(shè)置按鈕動畫與點(diǎn)擊事件
- 設(shè)置菜單展開收起動畫
- 測量菜單欄子View的位置
為菜單欄設(shè)置背景
自定義ViewGroup和自定義View的繪制過程有所不同，View可以直接在自己的onDraw方法中繪制所需要的效果，而ViewGroup會先測量子View的大小位置（onLayout），然后再進(jìn)行繪制，如果子View或background為空，則不會調(diào)用draw方法繪制。當(dāng)然我們可以調(diào)用setWillNotDraw(false)讓ViewGroup可以在子View或background為空的情況下進(jìn)行繪制，但我們會為ViewGroup設(shè)置一個(gè)默認(rèn)背景，所以可以省去這句代碼
設(shè)置背景很簡單，因?yàn)橐獙?shí)現(xiàn)圓角、描邊等效果，所以我們選擇使用GradientDrawable來定制背景，然后調(diào)用setBackground方法設(shè)置背景。創(chuàng)建HorizontalExpandMenu，繼承自RelativeLayout，同時(shí)自定義Attrs屬性
public class HorizontalExpandMenu extends RelativeLayout {
private Context mContext;
private AttributeSet mAttrs;
private int defaultWidth;//默認(rèn)寬度
private int defaultHeight;//默認(rèn)長度
private int viewWidth;
private int viewHeight;
private int menuBackColor;//菜單欄背景色
private float menuStrokeSize;//菜單欄邊框線的size
private int menuStrokeColor;//菜單欄邊框線的顏色
private float menuCornerRadius;//菜單欄圓角半徑
public HorizontalExpandMenu(Context context) {
super(context);
this.mContext = context;
init();
}
public HorizontalExpandMenu(Context context, AttributeSet attrs) {
super(context, attrs);
this.mContext = context;
this.mAttrs = attrs;
init();
}
private void init(){
TypedArray typedArray = mContext.obtainStyledAttributes(mAttrs, R.styleable.HorizontalExpandMenu);
defaultWidth = DpOrPxUtils.dip2px(mContext,200);
defaultHeight = DpOrPxUtils.dip2px(mContext,40);
menuBackColor = typedArray.getColor(R.styleable.HorizontalExpandMenu_back_color,Color.WHITE);
menuStrokeSize = typedArray.getDimension(R.styleable.HorizontalExpandMenu_stroke_size,1);
menuStrokeColor = typedArray.getColor(R.styleable.HorizontalExpandMenu_stroke_color,Color.GRAY);
menuCornerRadius = typedArray.getDimension(R.styleable.HorizontalExpandMenu_corner_radius,DpOrPxUtils.dip2px(mContext,20));
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int height = measureSize(defaultHeight, heightMeasureSpec);
int width = measureSize(defaultWidth, widthMeasureSpec);
viewHeight = height;
viewWidth = width;
setMeasuredDimension(viewWidth,viewHeight);
//布局代碼中如果沒有設(shè)置background屬性則在此處添加一個(gè)背景
if(getBackground()==null){
setMenuBackground();
}
}
private int measureSize(int defaultSize, int measureSpec) {
int result = defaultSize;
int specMode = View.MeasureSpec.getMode(measureSpec);
int specSize = View.MeasureSpec.getSize(measureSpec);
if (specMode == View.MeasureSpec.EXACTLY) {
result = specSize;
} else if (specMode == View.MeasureSpec.AT_MOST) {
result = Math.min(result, specSize);
}
return result;
}
/**
* 設(shè)置菜單背景，如果要顯示陰影，需在onLayout之前調(diào)用
*/
private void setMenuBackground(){
GradientDrawable gd = new GradientDrawable();
gd.setColor(menuBackColor);
gd.setStroke((int)menuStrokeSize, menuStrokeColor);
gd.setCornerRadius(menuCornerRadius);
setBackground(gd);
}
}
attrs屬性
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--注意這里的name要和自定義View的名稱一致，不然在xml布局中無法引用-->
<declare-styleable name="HorizontalExpandMenu">
<attr name="back_color" format="color"></attr>
<attr name="stroke_size" format="dimension"></attr>
<attr name="stroke_color" format="color"></attr>
<attr name="corner_radius" format="dimension"></attr>
</declare-styleable>
</resources>
在布局文件中使用
<com.anlia.expandmenu.widget.HorizontalExpandMenu
android:id="@+id/expandMenu1"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp">
</com.anlia.expandmenu.widget.HorizontalExpandMenu>
效果如圖
繪制菜單欄按鈕
我們要繪制菜單欄兩邊的按鈕，首先是要為按鈕“圈地”（測量位置和大?。?/strong>。設(shè)置按鈕區(qū)域?yàn)檎叫?/strong>，位于左側(cè)或右側(cè)（根據(jù)開發(fā)者設(shè)置而定），邊長和菜單欄ViewGroup的高相等。按鈕中的加號可以使用Path進(jìn)行繪制（當(dāng)然也可以用矢量圖或位圖），代碼如下
public class HorizontalExpandMenu extends RelativeLayout {
//省略部分代碼...
private float buttonIconDegrees;//按鈕icon符號豎線的旋轉(zhuǎn)角度
private float buttonIconSize;//按鈕icon符號的大小
private float buttonIconStrokeWidth;//按鈕icon符號的粗細(xì)
private int buttonIconColor;//按鈕icon顏色
private int buttonStyle;//按鈕類型
private int buttonRadius;//按鈕矩形區(qū)域內(nèi)圓半徑
private float buttonTop;//按鈕矩形區(qū)域top值
private float buttonBottom;//按鈕矩形區(qū)域bottom值
private Point rightButtonCenter;//右按鈕中點(diǎn)
private float rightButtonLeft;//右按鈕矩形區(qū)域left值
private float rightButtonRight;//右按鈕矩形區(qū)域right值
private Point leftButtonCenter;//左按鈕中點(diǎn)
private float leftButtonLeft;//左按鈕矩形區(qū)域left值
private float leftButtonRight;//左按鈕矩形區(qū)域right值
/**
* 根按鈕所在位置，默認(rèn)為右邊
*/
public class ButtonStyle {
public static final int Right = 0;
public static final int Left = 1;
}
private void init(){
//省略部分代碼...
buttonStyle = typedArray.getInteger(R.styleable.HorizontalExpandMenu_button_style,ButtonStyle.Right);
buttonIconDegrees = 0;
buttonIconSize = typedArray.getDimension(R.styleable.HorizontalExpandMenu_button_icon_size,DpOrPxUtils.dip2px(mContext,8));
buttonIconStrokeWidth = typedArray.getDimension(R.styleable.HorizontalExpandMenu_button_icon_stroke_width,8);
buttonIconColor = typedArray.getColor(R.styleable.HorizontalExpandMenu_button_icon_color,Color.GRAY);
buttonIconPaint = new Paint();
buttonIconPaint.setColor(buttonIconColor);
buttonIconPaint.setStyle(Paint.Style.STROKE);
buttonIconPaint.setStrokeWidth(buttonIconStrokeWidth);
buttonIconPaint.setAntiAlias(true);
path = new Path();
leftButtonCenter = new Point();
rightButtonCenter = new Point();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int height = measureSize(defaultHeight, heightMeasureSpec);
int width = measureSize(defaultWidth, widthMeasureSpec);
viewHeight = height;
viewWidth = width;
setMeasuredDimension(viewWidth,viewHeight);
buttonRadius = viewHeight/2;
layoutRootButton();
//布局代碼中如果沒有設(shè)置background屬性則在此處添加一個(gè)背景
if(getBackground()==null){
setMenuBackground();
}
}
@Override
protected void onDraw(Canvas canvas) {
layoutRootButton();
if(buttonStyle == ButtonStyle.Right){
drawRightIcon(canvas);
}else {
drawLeftIcon(canvas);
}
super.onDraw(canvas);//注意父方法在最后調(diào)用，以免icon被遮蓋
}
/**
* 測量按鈕中點(diǎn)和矩形位置
*/
private void layoutRootButton(){
buttonTop = 0;
buttonBottom = viewHeight;
rightButtonCenter.x = viewWidth- buttonRadius;
rightButtonCenter.y = viewHeight/2;
rightButtonLeft = rightButtonCenter.x- buttonRadius;
rightButtonRight = rightButtonCenter.x+ buttonRadius;
leftButtonCenter.x = buttonRadius;
leftButtonCenter.y = viewHeight/2;
leftButtonLeft = leftButtonCenter.x- buttonRadius;
leftButtonRight = leftButtonCenter.x+ buttonRadius;
}
/**
* 繪制左邊的按鈕
* @param canvas
*/
private void drawLeftIcon(Canvas canvas){
path.reset();
path.moveTo(leftButtonCenter.x- buttonIconSize, leftButtonCenter.y);
path.lineTo(leftButtonCenter.x+ buttonIconSize, leftButtonCenter.y);
canvas.drawPath(path, buttonIconPaint);//劃橫線
canvas.save();
canvas.rotate(-buttonIconDegrees, leftButtonCenter.x, leftButtonCenter.y);//旋轉(zhuǎn)畫布，讓豎線可以隨角度旋轉(zhuǎn)
path.reset();
path.moveTo(leftButtonCenter.x, leftButtonCenter.y- buttonIconSize);
path.lineTo(leftButtonCenter.x, leftButtonCenter.y+ buttonIconSize);
canvas.drawPath(path, buttonIconPaint);//畫豎線
canvas.restore();
}
/**
* 繪制右邊的按鈕
* @param canvas
*/
private void drawRightIcon(Canvas canvas){
path.reset();
path.moveTo(rightButtonCenter.x- buttonIconSize, rightButtonCenter.y);
path.lineTo(rightButtonCenter.x+ buttonIconSize, rightButtonCenter.y);
canvas.drawPath(path, buttonIconPaint);//劃橫線
canvas.save();
canvas.rotate(buttonIconDegrees, rightButtonCenter.x, rightButtonCenter.y);//旋轉(zhuǎn)畫布，讓豎線可以隨角度旋轉(zhuǎn)
path.reset();
path.moveTo(rightButtonCenter.x, rightButtonCenter.y- buttonIconSize);
path.lineTo(rightButtonCenter.x, rightButtonCenter.y+ buttonIconSize);
canvas.drawPath(path, buttonIconPaint);//畫豎線
canvas.restore();
}
}
新增attrs屬性
<declare-styleable name="HorizontalExpandMenu">
//省略部分代碼...
<attr name="button_style">
<enum name="right" value="0"/>
<enum name="left" value="1"/>
</attr>
<attr name="button_icon_size" format="dimension"></attr>
<attr name="button_icon_stroke_width" format="dimension"></attr>
<attr name="button_icon_color" format="color"></attr>
</declare-styleable>
布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.anlia.expandmenu.widget.HorizontalExpandMenu
android:id="@+id/expandMenu1"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="20dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp">
</com.anlia.expandmenu.widget.HorizontalExpandMenu>
<com.anlia.expandmenu.widget.HorizontalExpandMenu
android:id="@+id/expandMenu2"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
app:button_style="left">
</com.anlia.expandmenu.widget.HorizontalExpandMenu>
</LinearLayout>
</RelativeLayout>
效果如圖
設(shè)置按鈕動畫與點(diǎn)擊事件
之前我們定義了buttonIconDegrees屬性，下面我們通過Animation的插值器增減buttonIconDegrees的數(shù)值讓按鈕符號可以進(jìn)行變換，同時(shí)監(jiān)聽Touch為按鈕設(shè)置點(diǎn)擊事件
public class HorizontalExpandMenu extends RelativeLayout {
//省略部分代碼...
private boolean isExpand;//菜單是否展開，默認(rèn)為展開
private float downX = -1;
private float downY = -1;
private int expandAnimTime;//展開收起菜單的動畫時(shí)間
private void init(){
//省略部分代碼...
buttonIconDegrees = 90;//菜單初始狀態(tài)為展開，所以旋轉(zhuǎn)角度為90，按鈕符號為 - 號
expandAnimTime = typedArray.getInteger(R.styleable.HorizontalExpandMenu_expand_time,400);
isExpand = true;
anim = new ExpandMenuAnim();
}
@Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event);
float x = event.getX();
float y = event.getY();
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
downX = event.getX();
downY = event.getY();
break;
case MotionEvent.ACTION_MOVE:
break;
case MotionEvent.ACTION_UP:
switch (buttonStyle){
case ButtonStyle.Right:
if(x==downX&&y==downY&&y>=buttonTop&&y<=buttonBottom&&x>=rightButtonLeft&&x<=rightButtonRight){
expandMenu(expandAnimTime);
}
break;
case ButtonStyle.Left:
if(x==downX&&y==downY&&y>=buttonTop&&y<=buttonBottom&&x>=leftButtonLeft&&x<=leftButtonRight){
expandMenu(expandAnimTime);
}
break;
}
break;
}
return true;
}
private class ExpandMenuAnim extends Animation {
public ExpandMenuAnim() {}
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
super.applyTransformation(interpolatedTime, t);
if(isExpand){//展開菜單
buttonIconDegrees = 90 * interpolatedTime;
}else {//收起菜單
buttonIconDegrees = 90 - 90 * interpolatedTime;
}
postInvalidate();
}
}
/**
* 展開收起菜單
* @param time 動畫時(shí)間
*/
private void expandMenu(int time){
anim.setDuration(time);
isExpand = isExpand ?false:true;
this.startAnimation(anim);
}
}
效果如圖
設(shè)置菜單展開收起動畫
ViewGroup的大小和位置需要用到layout()方法進(jìn)行設(shè)置，和按鈕動畫一樣，我們使用動畫插值器動態(tài)改變菜單的長度
public class HorizontalExpandMenu extends RelativeLayout {
//省略部分代碼...
private float backPathWidth;//繪制子View區(qū)域?qū)挾? private float maxBackPathWidth;//繪制子View區(qū)域最大寬度
private int menuLeft;//menu區(qū)域left值
private int menuRight;//menu區(qū)域right值
private boolean isFirstLayout;//是否第一次測量位置，主要用于初始化menuLeft和menuRight的值
private void init(){
//省略部分代碼...
isFirstLayout = true;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//省略部分代碼...
maxBackPathWidth = viewWidth- buttonRadius *2;
backPathWidth = maxBackPathWidth;
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
//如果子View數(shù)量為0時(shí)，onLayout后getLeft()和getRight()才能獲取相應(yīng)數(shù)值，menuLeft和menuRight保存menu初始的left和right值
if(isFirstLayout){
menuLeft = getLeft();
menuRight = getRight();
isFirstLayout = false;
}
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
viewWidth = w;//當(dāng)menu的寬度改變時(shí)，重新給viewWidth賦值
}
@Override
public boolean onTouchEvent(MotionEvent event) {
//省略部分代碼...
switch (event.getAction()){
case MotionEvent.ACTION_UP:
if(backPathWidth==maxBackPathWidth || backPathWidth==0){//動畫結(jié)束時(shí)按鈕才生效
switch (buttonStyle){
case ButtonStyle.Right:
if(x==downX&&y==downY&&y>=buttonTop&&y<=buttonBottom&&x>=rightButtonLeft&&x<=rightButtonRight){
expandMenu(expandAnimTime);
}
break;
case ButtonStyle.Left:
if(x==downX&&y==downY&&y>=buttonTop&&y<=buttonBottom&&x>=leftButtonLeft&&x<=leftButtonRight){
expandMenu(expandAnimTime);
}
break;
}
}
break;
}
}
private class ExpandMenuAnim extends Animation {
public ExpandMenuAnim() {}
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
super.applyTransformation(interpolatedTime, t);
float left = menuRight - buttonRadius *2;//按鈕在右邊，菜單收起時(shí)按鈕區(qū)域left值
float right = menuLeft + buttonRadius *2;//按鈕在左邊，菜單收起時(shí)按鈕區(qū)域right值
if(isExpand){//打開菜單
backPathWidth = maxBackPathWidth * interpolatedTime;
buttonIconDegrees = 90 * interpolatedTime;
}else {//關(guān)閉菜單
backPathWidth = maxBackPathWidth - maxBackPathWidth * interpolatedTime;
buttonIconDegrees = 90 - 90 * interpolatedTime;
}
if(buttonStyle == ButtonStyle.Right){
layout((int)(left-backPathWidth),getTop(), menuRight,getBottom());//會調(diào)用onLayout重新測量子View位置
}else {
layout(menuLeft,getTop(),(int)(right+backPathWidth),getBottom());
}
postInvalidate();
}
}
}
效果如圖
測量菜單欄子View的位置
為了菜單欄的顯示效果，我們限制其直接子View的數(shù)量為一個(gè)。在子View數(shù)量不為0的情況下，我們需要動態(tài)顯示和隱藏子View，且在onLayout()方法中測量子View的位置，修改HorizontalExpandMenu
public class HorizontalExpandMenu extends RelativeLayout {
//省略部分代碼...
private boolean isAnimEnd;//動畫是否結(jié)束
private View childView;
private void init(){
//省略部分代碼...
isAnimEnd = false;
anim.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {}
@Override
public void onAnimationEnd(Animation animation) {
isAnimEnd = true;
}
@Override
public void onAnimationRepeat(Animation animation) {}
});
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
//如果子View數(shù)量為0時(shí)，onLayout后getLeft()和getRight()才能獲取相應(yīng)數(shù)值，menuLeft和menuRight保存menu初始的left和right值
if(isFirstLayout){
menuLeft = getLeft();
menuRight = getRight();
isFirstLayout = false;
}
if(getChildCount()>0){
childView = getChildAt(0);
if(isExpand){
if(buttonStyle == Right){
childView.layout(leftButtonCenter.x,(int) buttonTop,(int) rightButtonLeft,(int) buttonBottom);
}else {
childView.layout((int)(leftButtonRight),(int) buttonTop,rightButtonCenter.x,(int) buttonBottom);
}
//限制子View在菜單內(nèi)，LayoutParam類型和當(dāng)前ViewGroup一致
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(viewWidth,viewHeight);
layoutParams.setMargins(0,0,buttonRadius *3,0);
childView.setLayoutParams(layoutParams);
}else {
childView.setVisibility(GONE);
}
}
if(getChildCount()>1){//限制直接子View的數(shù)量
throw new IllegalStateException("HorizontalExpandMenu can host only one direct child");
}
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
viewWidth = w;//當(dāng)menu的寬度改變時(shí)，重新給viewWidth賦值
if(isAnimEnd){//防止出現(xiàn)動畫結(jié)束后菜單欄位置大小測量錯(cuò)誤的bug
if(buttonStyle == Right){
if(!isExpand){
layout((int)(menuRight - buttonRadius *2-backPathWidth),getTop(), menuRight,getBottom());
}
}else {
if(!isExpand){
layout(menuLeft,getTop(),(int)(menuLeft + buttonRadius *2+backPathWidth),getBottom());
}
}
}
}
private class ExpandMenuAnim extends Animation {
public ExpandMenuAnim() {}
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
super.applyTransformation(interpolatedTime, t);
float left = menuRight - buttonRadius *2;//按鈕在右邊，菜單收起時(shí)按鈕區(qū)域left值
float right = menuLeft + buttonRadius *2;//按鈕在左邊，菜單收起時(shí)按鈕區(qū)域right值
if(childView!=null) {
childView.setVisibility(GONE);
}
if(isExpand){//打開菜單
backPathWidth = maxBackPathWidth * interpolatedTime;
buttonIconDegrees = 90 * interpolatedTime;
if(backPathWidth==maxBackPathWidth){
if(childView!=null) {
childView.setVisibility(VISIBLE);
}
}
}else {//關(guān)閉菜單
backPathWidth = maxBackPathWidth - maxBackPathWidth * interpolatedTime;
buttonIconDegrees = 90 - 90 * interpolatedTime;
}
if(buttonStyle == Right){
layout((int)(left-backPathWidth),getTop(), menuRight,getBottom());//會調(diào)用onLayout重新測量子View位置
}else {
layout(menuLeft,getTop(),(int)(right+backPathWidth),getBottom());
}
postInvalidate();
}
}
/**
* 展開收起菜單
* @param time 動畫時(shí)間
*/
private void expandMenu(int time){
anim.setDuration(time);
isExpand = isExpand ?false:true;
this.startAnimation(anim);
isAnimEnd = false;
}
}
布局代碼
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.anlia.expandmenu.widget.HorizontalExpandMenu
android:id="@+id/expandMenu1"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="20dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center_vertical"
android:clickable="true">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="item1"/>
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="item2"/>
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="item3"/>
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="item4"/>
</LinearLayout>
</com.anlia.expandmenu.widget.HorizontalExpandMenu>
<com.anlia.expandmenu.widget.HorizontalExpandMenu
android:id="@+id/expandMenu2"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="15dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
app:button_style="left">
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:scrollbars="none">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center_vertical"
android:clickable="true">
<TextView
android:layout_width="100dp"
android:layout_height="match_parent"
android:gravity="center"
android:background="@color/blue"
android:text="item1"/>
<TextView
android:layout_width="50dp"
android:layout_height="match_parent"
android:gravity="center"
android:background="@color/yellow"
android:text="item2"/>
<TextView
android:layout_width="100dp"
android:layout_height="match_parent"
android:gravity="center"
android:background="@color/green"
android:text="item3"/>
<TextView
android:layout_width="150dp"
android:layout_height="match_parent"
android:gravity="center"
android:background="@color/red"
android:text="item4"/>
</LinearLayout>
</HorizontalScrollView>
</com.anlia.expandmenu.widget.HorizontalExpandMenu>
</LinearLayout>
效果如圖
至此本篇教程到此結(jié)束，如果大家看了感覺還不錯(cuò)麻煩點(diǎn)個(gè)贊，你們的支持是我最大的動力~
