androiddashboard布局的一个例子

在android中&＃xff0c;有一类布局的样式&＃xff0c;其实是不错的&＃xff0c;叫dashboard&＃xff0c;中文名叫仪表板

&＃xff0c;其实就是把很多不同的功能&＃xff0c;都按一个个不同的图标&＃xff0c;分别列出来&＃xff0c;而且这些图标的间距是相等的&＃xff0c;如下图&＃xff1a;

[img]

http://www.androidhive.info/wp-content/uploads/2011/12/output_dashboard.png

[/img]



其核心为有一个头部header&＃xff0c;一个中间部分&＃xff0c;一个footer&＃xff0c;在设计时&＃xff0c;可以先搞个

style.xml&＃xff0c;如下&＃xff1a;














然后头部的actionbar_layout.xml,可以这样写&＃xff1a;


style&＃61;"&＃64;style/ActionBarCompat" >

android:layout_width&＃61;"wrap_content"
android:layout_height&＃61;"fill_parent"
android:clickable&＃61;"false"
android:paddingLeft&＃61;"15dip"
android:scaleType&＃61;"center"
android:src&＃61;"&＃64;drawable/facebook_logo" />



然后DashboardLayout.java 是GOOGLE IO提出的一个不错的程序&＃xff0c;把应用各个图表分布均匀排列好&＃xff0c;具体代码为&＃xff1a;
[code&＃61;"java"]
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 &＃61; 10;

private int mMaxChildWidth &＃61; 0;
private int mMaxChildHeight &＃61; 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);
}

&＃64;Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
mMaxChildWidth &＃61; 0;
mMaxChildHeight &＃61; 0;

// Measure once to find the maximum child size.

int childWidthMeasureSpec &＃61; MeasureSpec.makeMeasureSpec(
MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.AT_MOST);
int childHeightMeasureSpec &＃61; MeasureSpec.makeMeasureSpec(
MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.AT_MOST);

final int count &＃61; getChildCount();
for (int i &＃61; 0; i final View child &＃61; getChildAt(i);
if (child.getVisibility() &＃61;&＃61; GONE) {
continue;
}

child.measure(childWidthMeasureSpec, childHeightMeasureSpec);

mMaxChildWidth &＃61; Math.max(mMaxChildWidth, child.getMeasuredWidth());
mMaxChildHeight &＃61; Math.max(mMaxChildHeight, child.getMeasuredHeight());
}

// Measure again for each child to be exactly the same size.

childWidthMeasureSpec &＃61; MeasureSpec.makeMeasureSpec(
mMaxChildWidth, MeasureSpec.EXACTLY);
childHeightMeasureSpec &＃61; MeasureSpec.makeMeasureSpec(
mMaxChildHeight, MeasureSpec.EXACTLY);

for (int i &＃61; 0; i final View child &＃61; getChildAt(i);
if (child.getVisibility() &＃61;&＃61; GONE) {
continue;
}

child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
}

setMeasuredDimension(
resolveSize(mMaxChildWidth, widthMeasureSpec),
resolveSize(mMaxChildHeight, heightMeasureSpec));
}

&＃64;Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int width &＃61; r - l;
int height &＃61; b - t;

final int count &＃61; getChildCount();

// Calculate the number of visible children.
int visibleCount &＃61; 0;
for (int i &＃61; 0; i final View child &＃61; getChildAt(i);
if (child.getVisibility() &＃61;&＃61; GONE) {
continue;
}
&＃43;&＃43;visibleCount;
}

if (visibleCount &＃61;&＃61; 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 &＃61; Integer.MAX_VALUE;
int spaceDifference;

// Horizontal and vertical space between items
int hSpace &＃61; 0;
int vSpace &＃61; 0;

int cols &＃61; 1;
int rows;

while (true) {
rows &＃61; (visibleCount - 1) / cols &＃43; 1;

hSpace &＃61; ((width - mMaxChildWidth * cols) / (cols &＃43; 1));
vSpace &＃61; ((height - mMaxChildHeight * rows) / (rows &＃43; 1));

spaceDifference &＃61; Math.abs(vSpace - hSpace);
if (rows * cols !&＃61; visibleCount) {
spaceDifference *&＃61; UNEVEN_GRID_PENALTY_MULTIPLIER;
}

if (spaceDifference // Found a better whitespace squareness/ratio
bestSpaceDifference &＃61; spaceDifference;

// If we found a better whitespace squareness and there&＃39;s only 1 row, this is
// the best we can do.
if (rows &＃61;&＃61; 1) {
break;
}
} else {
// This is a worse whitespace ratio, use the previous value of cols and exit.
--cols;
rows &＃61; (visibleCount - 1) / cols &＃43; 1;
hSpace &＃61; ((width - mMaxChildWidth * cols) / (cols &＃43; 1));
vSpace &＃61; ((height - mMaxChildHeight * rows) / (rows &＃43; 1));
break;
}

&＃43;&＃43;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 &＃61; Math.max(0, hSpace);
vSpace &＃61; Math.max(0, vSpace);

// Re-use width/height variables to be child width/height.
width &＃61; (width - hSpace * (cols &＃43; 1)) / cols;
height &＃61; (height - vSpace * (rows &＃43; 1)) / rows;

int left, top;
int col, row;
int visibleIndex &＃61; 0;
for (int i &＃61; 0; i final View child &＃61; getChildAt(i);
if (child.getVisibility() &＃61;&＃61; GONE) {
continue;
}

row &＃61; visibleIndex / cols;
col &＃61; visibleIndex % cols;

left &＃61; hSpace * (col &＃43; 1) &＃43; width * col;
top &＃61; vSpace * (row &＃43; 1) &＃43; height * row;

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



然后&＃xff0c;这个其实是一个布局文件的样式程序&＃xff0c;接下来就要设计其XML&＃xff0c;利用这个布局程序&＃xff0c;代码如下&＃xff1a;

fragment_layout.xml


xmlns:android&＃61;"http://schemas.android.com/apk/res/android"
android:layout_width&＃61;"fill_parent"
android:layout_height&＃61;"fill_parent"
android:layout_weight&＃61;"1"
android:background&＃61;"#f8f9fe" >

android:id&＃61;"&＃64;&＃43;id/btn_news_feed"
style&＃61;"&＃64;style/DashboardButton"
android:drawableTop&＃61;"&＃64;drawable/btn_newsfeed"
android:text&＃61;"News Feed" />


android:id&＃61;"&＃64;&＃43;id/btn_friends"
style&＃61;"&＃64;style/DashboardButton"
android:drawableTop&＃61;"&＃64;drawable/btn_friends"
android:text&＃61;"Friends" />


android:id&＃61;"&＃64;&＃43;id/btn_messages"
style&＃61;"&＃64;style/DashboardButton"
android:drawableTop&＃61;"&＃64;drawable/btn_messages"
android:text&＃61;"Messages" />


android:id&＃61;"&＃64;&＃43;id/btn_places"
style&＃61;"&＃64;style/DashboardButton"
android:drawableTop&＃61;"&＃64;drawable/btn_places"
android:text&＃61;"Places" />


android:id&＃61;"&＃64;&＃43;id/btn_events"
style&＃61;"&＃64;style/DashboardButton"
android:drawableTop&＃61;"&＃64;drawable/btn_events"
android:text&＃61;"Events" />


android:id&＃61;"&＃64;&＃43;id/btn_photos"
style&＃61;"&＃64;style/DashboardButton"
android:drawableTop&＃61;"&＃64;drawable/btn_photos"
android:text&＃61;"Photos" />






这样就可以初步运行了&＃xff0c;这个是核心部分&＃xff0c;更详细的文和代码&＃xff0c;请见&＃xff1a;

http://www.androidhive.info/2011/12/android-dashboard-design-tutorial/