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提出的一个不错的程序,把应用各个图表分布均匀排列好,具体代码为:
[code="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 = 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/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值