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/

更多相关文章

随机推荐