文档章节

android dashboard布局

铂金小狼
 铂金小狼
发布于 2013/09/17 10:11
字数 1121
阅读 232
收藏 0

一直不知道dashboard是个布局,其实有些应用用的挺多的,这种布局中文名叫仪表盘,就是把很多不同的功能,按一个一个不同的图标分列出来,而且这些图标的间距是xiangde感觉就有点像自由适应的gridview

不说了,先上图

先看style.xml

<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">#ff0000</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>
就是一个头部和每个button的属性,可以忽略


再者就是建立一个DashboardLayout,这个最重要,是大神写的,再次贴出来吧

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; 
	        } 
	    } 

}
接下来就是main.xml了
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

   <LinearLayout 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/ic_launcher" /> 
    </LinearLayout>
    <com.example.dashboard.DashboardLayout
        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/ic_launcher"
        android:text="News Feed" /> 
  
    <!--  Friends Button -->
    <Button
        android:id="@+id/btn_friends"
        style="@style/DashboardButton"
        android:drawableTop="@drawable/ic_launcher"
        android:text="Friends" /> 
  
    <!--  Messages Button -->
    <Button
        android:id="@+id/btn_messages"
        style="@style/DashboardButton"
        android:drawableTop="@drawable/ic_launcher"
        android:text="Messages" /> 
  
    <!--  Places Button -->
    <Button
        android:id="@+id/btn_places"
        style="@style/DashboardButton"
        android:drawableTop="@drawable/ic_launcher"
        android:text="Places" /> 
  
    <!--  Events Button -->
    <Button
        android:id="@+id/btn_events"
        style="@style/DashboardButton"
        android:drawableTop="@drawable/ic_launcher"
        android:text="Events" /> 
  
    <!--  Photos Button -->
    <Button
        android:id="@+id/btn_photos"
        style="@style/DashboardButton"
        android:drawableTop="@drawable/ic_launcher"
        android:text="Photos" /> 
  
</com.example.dashboard.DashboardLayout>
</RelativeLayout>

一个头部文件,然后就是引用的DashboardLayout,在里面有6个button

最后在入口acitivity加载出来,就是开始图片的效果了,但是不知道其他分辨率如何,但手里木有平板,只能在android graphical layout里面抓图,图有点小,将就看吧

看来无论多大的屏幕,都是等间距的,只不过图片的大小而已,到时候自己弄几个不同分辨率配置的图片,应该能达到想要的效果,我突然奇想,删掉一个button试试,看是什么布局

上面这个是N7的尺寸,800X1200,布局不变,依然范特西

上面这个就是480X800的了,也就是开始第一次出现的那个尺寸,看来的确算是自适应了

总结:还没具体用过,但感觉如果是这种类似gridview的排列可以试试Dashboard布局,因为感觉方便,而且能够自适应


© 著作权归作者所有

铂金小狼
粉丝 54
博文 238
码字总数 23466
作品 0
程序员
私信 提问
Android 仪表板设计教程

在手机 app 中,仪表板是一个非常重要的元素,为 app 的功能提供了直观的导航,在这个教程中我们将讲述如何创建 app 的仪表板界面。 我们将开发一个类似 facebook 的仪表板,如下图所示: 让...

红薯
2011/12/13
3.4K
11
android.appwidget类解析

随着Android 1.5的普及很多网友发现SDK中多出了appwidget这个框架。作为使用Java语言设计的Widget相比目前主流的W3C Widget有更好的运行效率和底层控制能力,今天我们就Android平台上的Widge...

华宰
2011/09/15
739
0
谷歌:Android 4.4 的使用率已达 1.1%

Android 4.4 KitKat是在11月初发布的,现在也正逐渐推向Android手机与平板用户,谷歌Android Developer Dashboard统计了截止12月2日,过去7天中Google Play的相关数据,结果显示Android 4.4...

oschina
2013/12/04
2.5K
15
浅谈android4.0开发之GridLayout布局

本文重点讲述了自android4.0版本后新增的GridLayout网格布局的一些基本内容,并在此基础上实现了一个简单的计算器布局框架。通过本文,您可以了解到一些android UI开发的新特性,并能够实现相...

mutouzhang
2014/03/28
0
1
android布局文件加载过程是什么样的

看下这个简单的布局,注意标红的位置,是表示把linearlayout放在父布局的最底部 请问下,系统在加载这个布局文件的时候,到底是如何解析加载的? 是简单的从上往下吗? 如果是从上往下进行解...

天王盖地虎626
2015/08/31
271
1

没有更多内容

加载失败,请刷新页面

加载更多

Hive(五)——Sqoop导入导出数据

一、

ittzg
31分钟前
2
0
抽象同步队列AQS——AbstractQueuedSynchronizer锁详解

AQS——锁的底层支持 谈到并发,不得不谈ReentrantLock;而谈到ReentrantLock,不得不谈AbstractQueuedSynchronizer(AQS)! 类如其名,抽象的队列式的同步器,AQS定义了一套多线程访问共享资...

须臾之余
今天
2
0
springboot配置百度UEditor 富文本详解

富文本简介 UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 准备工作 ueditor需要单独文...

wotrd
昨天
3
0
mysql 5.7之my.cnf配置大全

[client]port = 3306socket = /tmp/mysql.sock[mysqld]###############################基础设置######################################Mysql服务的唯一编号 每个mysql服务...

Online_Reus
昨天
2
0
MAVEN打包时引入外部链接的包

1.项目引入了ORACLE的jar包,MAVEN配置如下 2.打jar包的时候需要指定下main入口函数mainClass <dependency> <groupId>com.oracle</groupId> <artifactId>ojdbc6</artifactId> ......

Cobbage
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部