android dashboard布局的一个例子
在android中，有一类布局的样式，其实是不错的，叫dashboard，中文名叫仪表板
，其实就是把很多不同的功能，都按一个个不同的图标，分别列出来，而且这些图标的间距是相等的，如下图：
[img]
http://www.androidhive.info/wp-content/uploads/2011/12/output_dashboard.png
[/img]
其核心为有一个头部header，一个中间部分，一个footer，在设计时，可以先搞个
style.xml，如下：
<resources>
<style name="ActionBarCompat">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">50dp</item>
<item name="android:orientation">horizontal</item>
<item name="android:background">@drawable/actionbar_background</item>
</style>
<style name="DashboardButton">
<item name="android:layout_gravity">center_vertical</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:drawablePadding">2dp</item>
<item name="android:textSize">16dp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#ff29549f</item>
<item name="android:background">@null</item>
</style>
<style name="FooterBar">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">40dp</item>
<item name="android:orientation">horizontal</item>
<item name="android:background">#dedede</item>
</style>
</resources>
然后头部的actionbar_layout.xml,可以这样写：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" style="@style/ActionBarCompat" > <ImageView android:layout_width="wrap_content" android:layout_height="fill_parent" android:clickable="false" android:paddingLeft="15dip" android:scaleType="center" android:src="@drawable/facebook_logo" /> </LinearLayout> 然后DashboardLayout.java 是GOOGLE IO提出的一个不错的程序，把应用各个图表分布均匀排列好，具体代码为：package com.androidhive.dashboard; /* * Copyright 2011 Google Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ import android.content.Context; import android.util.AttributeSet; import android.view.View; import android.view.ViewGroup; /** * Custom layout that arranges children in a grid-like manner, optimizing for even horizontal and * vertical whitespace. */public class DashboardLayout extends ViewGroup { private static final int UNEVEN_GRID_PENALTY_MULTIPLIER = 10; private int mMaxChildWidth = 0; private int mMaxChildHeight = 0; public DashboardLayout(Context context) { super(context, null); } public DashboardLayout(Context context, AttributeSet attrs) { super(context, attrs, 0); } public DashboardLayout(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } @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(widthMeasureSpec), 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; } // Calculate what number of rows and columns will optimize for even horizontal and // vertical whitespace between items. Start with a 1 x N grid, then try 2 x N, and so on. int bestSpaceDifference = Integer.MAX_VALUE; int spaceDifference; // Horizontal and vertical space between items int hSpace = 0; int vSpace = 0; int cols = 1; int rows; while (true) { rows = (visibleCount - 1) / cols + 1; hSpace = ((width - mMaxChildWidth * cols) / (cols + 1)); vSpace = ((height - mMaxChildHeight * rows) / (rows + 1)); spaceDifference = Math.abs(vSpace - hSpace); if (rows * cols != visibleCount) { spaceDifference *= UNEVEN_GRID_PENALTY_MULTIPLIER; } if (spaceDifference < bestSpaceDifference) { // Found a better whitespace squareness/ratio bestSpaceDifference = spaceDifference; // If we found a better whitespace squareness and there's only 1 row, this is // the best we can do. if (rows == 1) { break; } } else { // This is a worse whitespace ratio, use the previous value of cols and exit. --cols; rows = (visibleCount - 1) / cols + 1; hSpace = ((width - mMaxChildWidth * cols) / (cols + 1)); vSpace = ((height - mMaxChildHeight * rows) / (rows + 1)); break; } ++cols; } // 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; } } }
然后，这个其实是一个布局文件的样式程序，接下来就要设计其XML，利用这个布局程序，代码如下：
fragment_layout.xml
<com.androidhive.dashboard.DashboardLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:background="#f8f9fe" > <!-- News Feed Button --> <Button android:id="@+id/btn_news_feed" style="@style/DashboardButton" android:drawableTop="@drawable/btn_newsfeed" android:text="News Feed" /> <!-- Friends Button --> <Button android:id="@+id/btn_friends" style="@style/DashboardButton" android:drawableTop="@drawable/btn_friends" android:text="Friends" /> <!-- Messages Button --> <Button android:id="@+id/btn_messages" style="@style/DashboardButton" android:drawableTop="@drawable/btn_messages" android:text="Messages" /> <!-- Places Button --> <Button android:id="@+id/btn_places" style="@style/DashboardButton" android:drawableTop="@drawable/btn_places" android:text="Places" /> <!-- Events Button --> <Button android:id="@+id/btn_events" style="@style/DashboardButton" android:drawableTop="@drawable/btn_events" android:text="Events" /> <!-- Photos Button --> <Button android:id="@+id/btn_photos" style="@style/DashboardButton" android:drawableTop="@drawable/btn_photos" android:text="Photos" /> </com.androidhive.dashboard.DashboardLayout>
这样就可以初步运行了，这个是核心部分，更详细的文和代码，请见：
http://www.androidhive.info/2011/12/android-dashboard-design-tutorial/