如何创建类似布局的菜单栏?

时间:2012-10-22 13:30:11

标签: android layout menu menubar

在我的一项活动中,我希望有一个类似“菜单栏”的东西,在纵向模式下位于屏幕底部,在横向模式下位于屏幕右侧。

菜单栏是永久可见的,并且将容纳图像按钮,其具有相同的高度但可以具有不同的宽度。根据'菜单栏'中“按钮”的数量,选择适当的填充,以便正确使用可用的高度或宽度。 基本上它应该是这样的:

portrait landscape

我已按照建议here考虑​​使用“拆分操作栏”。但在这种情况下,我只能在纵向模式下获得所需的效果。

目前我考虑实施自定义网格视图布局以获得此效果,或者修改找到here的信息中心模式。

也许你们中的一些人已经实现了类似“菜单栏布局”的东西,并且可以指出我正确的方向。

修改

我略微修改了上面提到的仪表板模式代码,它只是概念的第一个证据,但似乎按照我的意图行事:

public class Nx1Layout extends ViewGroup {

private static final String TAG = "Nx1Layout";
private int mMaxChildWidth = 0;
private int mMaxChildHeight = 0;
private int mScreenOrientation = Configuration.ORIENTATION_PORTRAIT;

public Nx1Layout(Context context) {
    super(context, null);
}

public Nx1Layout(Context context, AttributeSet attrs) {
    super(context, attrs, 0);
}

public Nx1Layout(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

public void setScreenOrientation(int screenOrientation) {
    mScreenOrientation = screenOrientation;
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    mMaxChildWidth = 0;
    mMaxChildHeight = 0;

    // Measure once to find the maximum child size.
    int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.AT_MOST);
    int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(MeasureSpec.getSize(heightMeasureSpec), MeasureSpec.AT_MOST);
    final int count = getChildCount();
    for (int i = 0; i < count; i++) {
        final View child = getChildAt(i);
        if (child.getVisibility() == GONE) {
            continue;
        }

        child.measure(childWidthMeasureSpec, childHeightMeasureSpec);

        mMaxChildWidth = Math.max(mMaxChildWidth, child.getMeasuredWidth());
        mMaxChildHeight = Math.max(mMaxChildHeight, child.getMeasuredHeight());
    }

    // Measure again for each child to be exactly the same size.
    childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(mMaxChildWidth, MeasureSpec.EXACTLY);
    childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(mMaxChildHeight, MeasureSpec.EXACTLY);
    for (int i = 0; i < count; i++) {
        final View child = getChildAt(i);
        if (child.getVisibility() == GONE) {
            continue;
        }

        child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
    }
    setMeasuredDimension(resolveSize(mMaxChildWidth, widthMeasureSpec),resolveSize(mMaxChildHeight, heightMeasureSpec));
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    int width = r - l;
    int height = b - t;

    final int count = getChildCount();

    // Calculate the number of visible children.
    int visibleCount = 0;
    for (int i = 0; i < count; i++) {
        final View child = getChildAt(i);
        if (child.getVisibility() == GONE) {
            continue;
        }
        ++visibleCount;
    }

    if (visibleCount == 0) {
        return;
    }

    // Horizontal and vertical space between items
    int hSpace = 0;
    int vSpace = 0;

    int cols, rows;

    if(mScreenOrientation == Configuration.ORIENTATION_PORTRAIT) {
        cols = visibleCount;
        rows = 1;
    } else {
        cols = 1;
        rows = visibleCount;
    }

    hSpace = ((width - mMaxChildWidth * cols) / (cols + 1));
    vSpace = ((height - mMaxChildHeight * rows) / (rows + 1));

    // Lay out children based on calculated best-fit number of rows and cols.
    // If we chose a layout that has negative horizontal or vertical space, force it to zero.
    hSpace = Math.max(0, hSpace);
    vSpace = Math.max(0, vSpace);

    // Re-use width/height variables to be child width/height.
    width = (width - hSpace * (cols + 1)) / cols;
    height = (height - vSpace * (rows + 1)) / rows;

    int left, top;
    int col, row;
    int visibleIndex = 0;
    for (int i = 0; i < count; i++) {
        final View child = getChildAt(i);
        if (child.getVisibility() == GONE) {
            continue;
        }

        row = visibleIndex / cols;
        col = visibleIndex % cols;

        left = hSpace * (col + 1) + width * col;
        top = vSpace * (row + 1) + height * row;

        child.layout(left, top, (hSpace == 0 && col == cols - 1) ? r : (left + width), (vSpace == 0 && row == rows - 1) ? b : (top + height));
        ++visibleIndex;
    }
}
}

以下是一些测试它的活动代码:

public class TestActivity extends SherlockFragmentActivity {

 @Override
 public void onCreate(Bundle savedInstanceState) {
     // setup ui
     super.onCreate(savedInstanceState);
     setContentView(R.layout.ui_test);

     Nx1Layout layout = (Nx1Layout)findViewById(R.id.layout1);
     layout.setScreenOrientation(getScreenOrientation());
 }

 public int getScreenOrientation()
 {
     Display getOrient = getWindowManager().getDefaultDisplay();
     int orientation = Configuration.ORIENTATION_UNDEFINED;
     if(getOrient.getWidth() == getOrient.getHeight()){
         orientation = Configuration.ORIENTATION_SQUARE;
     } else{ 
         if(getOrient.getWidth() < getOrient.getHeight()){
             orientation = Configuration.ORIENTATION_PORTRAIT;
         }else { 
              orientation = Configuration.ORIENTATION_LANDSCAPE;
         }
     }
     return orientation;
 }}

这是肖像模式的布局文件:

<?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" >
   <com.yourpackagename.Nx1Layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:id="@+id/layout1">

                <ImageView
                    android:id="@+id/image1"
                    android:layout_width="70dp"
                    android:layout_height="70dp"
                    android:contentDescription="some description"
                    android:scaleType="centerInside"
                    android:padding="2dp"
                    android:src="@drawable/test_draw" />

                <ImageView
                    android:id="@+id/image2"
                    android:layout_width="70dp"
                    android:layout_height="70dp"
                    android:contentDescription="some description"
                    android:scaleType="centerInside"
                    android:padding="2dp"
                    android:src="@drawable/test_draw" />

                <ImageView
                    android:id="@+id/image3"
                    android:layout_width="70dp"
                    android:layout_height="70dp"
                    android:contentDescription="some description"
                    android:scaleType="centerInside"
                    android:padding="2dp"
                    android:src="@drawable/test_draw" />

    </com.yourpackagename.Nx1Layout>
</LinearLayout>

这里是横向模式的布局文件:

<?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" >
   <com.yourpackagename.Nx1Layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="70dp"
    android:layout_height="match_parent"
    android:id="@+id/layout1">

                <ImageView
                    android:id="@+id/image1"
                    android:layout_width="70dp"
                    android:layout_height="70dp"
                    android:contentDescription="some description"
                    android:scaleType="centerInside"
                    android:padding="2dp"
                    android:src="@drawable/test_draw" />

                <ImageView
                    android:id="@+id/image2"
                    android:layout_width="70dp"
                    android:layout_height="70dp"
                    android:contentDescription="some description"
                    android:scaleType="centerInside"
                    android:padding="2dp"
                    android:src="@drawable/test_draw_narrow" />

                <ImageView
                    android:id="@+id/image3"
                    android:layout_width="70dp"
                    android:layout_height="70dp"
                    android:contentDescription="some description"
                    android:scaleType="centerInside"
                    android:padding="2dp"
                    android:src="@drawable/test_draw" />
    </com.yourpackagename.Nx1Layout>
</LinearLayout>

最后但并非最不重要的是我使用过的一些绘画:

test draw

随意评论此解决方案...

0 个答案:

没有答案