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/