精华内容
下载资源
问答
  • 浅谈Vue个性化dashBoard 布局

    千次阅读 2017-09-29 22:09:05
    dashBoard布局在管理系统使用比较多;使用自己喜欢的方式进行自定义布局使用npm 安装npm install vue-grid-layout全局使用import vueGridLayout from 'vue-grid-layout'; Vue.use(vueGridLayout);局部使用var ...

    dashBoard布局在管理系统使用比较多;使用自己喜欢的方式进行自定义布局

    使用npm 安装

    npm install vue-grid-layout

    全局使用

    import vueGridLayout from 'vue-grid-layout';
    Vue.use(vueGridLayout);

    局部使用

    var GridLayout = vueGridLayout.GridLayout;
    var GridItem = vueGridLayout.GridItem;
    

    注册组件

     components:{
                GridLayout,
                GridItem,
        },

    数据源

    var testLayout = [
          {"x":0,"y":0,"w":2,"h":2,"i":"0",compentent:"组件"},
          {"x":2,"y":0,"w":2,"h":4,"i":"1",compentent:"组件"},
          {"x":4,"y":0,"w":2,"h":5,"i":"2",compentent:"组件"},
          {"x":6,"y":0,"w":2,"h":3,"i":"3",compentent:"组件"},
        ];

    渲染

    <grid-layout
                :layout="layout"
                :col-num="12"
                :row-height="30"
                :is-draggable="true"
                :is-resizable="true"
                :vertical-compact="true"
                :margin="[10, 10]"
                :use-css-transforms="true"
        >
            <grid-item v-for="item in layout"
                       :x="item.x"
                       :y="item.y"
                       :w="item.w"
                       :h="item.h"
                       :i="item.i">
              <component v-bind:is="item.component"> </component>
            </grid-item>
        </grid-layout>

    参数配置

    autoSize    Boolean true    是否根据内容确定容器的高度
    isDraggable Boolean true    是否支持推拽
    isResizable Boolean true    是否支持改变大小
    useCssTransforms    Boolean true    是否使用自定义的过渡效果
    verticalCompact Boolean true    是否使用verticalCompact布局
    layout  Array   -   布局位置

    事件

    @resize="resizeEvent"     //托拽时
    @move="moveEvent"         //移动时
    @resized="resizedEvent"  //托拽结束
    @moved="movedEvent"      //移动停止

    是不错的dashBoard布局选择,参考来源
    https://github.com/jbaysolutions/vue-grid-layout

    展开全文
  • android dashboard布局

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

    一直不知道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布局,因为感觉方便,而且能够自适应


    转载于:https://my.oschina.net/luozheng/blog/161874

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

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

    不说了,先上图

    6ec331c8fb9dbe3a5d82828e4ff1e60b.png

    先看style.xml

    fill_parent

    50dp

    horizontal

    #ff0000

    center_vertical

    wrap_content

    wrap_content

    center_horizontal

    2dp

    16dp

    bold

    #ff29549f

    @null

    就是一个头部和每个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了

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity" >

    android:layout_width="wrap_content"

    android:layout_height="fill_parent"

    android:clickable="false"

    android:paddingLeft="15dip"

    android:scaleType="center"

    android:src="@drawable/ic_launcher" />

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:layout_weight="1"

    android:background="#f8f9fe" >

    android:id="@+id/btn_news_feed"

    style="@style/DashboardButton"

    android:drawableTop="@drawable/ic_launcher"

    android:text="News Feed" />

    android:id="@+id/btn_friends"

    style="@style/DashboardButton"

    android:drawableTop="@drawable/ic_launcher"

    android:text="Friends" />

    android:id="@+id/btn_messages"

    style="@style/DashboardButton"

    android:drawableTop="@drawable/ic_launcher"

    android:text="Messages" />

    android:id="@+id/btn_places"

    style="@style/DashboardButton"

    android:drawableTop="@drawable/ic_launcher"

    android:text="Places" />

    android:id="@+id/btn_events"

    style="@style/DashboardButton"

    android:drawableTop="@drawable/ic_launcher"

    android:text="Events" />

    android:id="@+id/btn_photos"

    style="@style/DashboardButton"

    android:drawableTop="@drawable/ic_launcher"

    android:text="Photos" />

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

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

    ae6abbe68ffbb0dd12ebbd569047284a.png

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

    20090ec5330ec9d77b6f48fe57e059c3.png

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

    03f1c95557570807c64ce3d9d30b31a0.png

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

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

    展开全文
  • 在android中,有一类布局的样式,其实是不错的,叫dashboard,中文名叫仪表板 ,其实就是把很多不同的功能,都按一个个不同的图标,分别列出来,而且这些图标的间距是相等的,如下图: [img] ...
    在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/
    展开全文
  • 原来的DashboardLayout.java的下载地址 他
  • 入门响应式仪表板布局 使用tailwindcss alpinejs构建的入门响应式仪表板布局 Vue版本 另一个项目 K-WD仪表板 开始: 克隆存储库: git clone https://github.com/Kamona-WD/starter-dashboard-layout.git cd ...
  • 怎样制作爽心的 dashboard

    万次阅读 2018-09-20 18:12:45
    我们知道,通过报表工具实现大屏展示可以通过单张报表、多张报表 Dashboard 布局或者多张报表页面布局等方式实现,那么,如何能设计出优秀的 dashboard 呢? 下面是国外的著名的可视化专家 Stephen Few 在 2012 年...
  • 我们知道,通过报表工具实现大屏展示可以通过单张报表、多张报表 Dashboard 布局或者多张报表页面布局等方式实现。 那么,如何能设计出优秀的 dashboard 呢? 下面是国外的著名的可视化专家 Stephen Few 在 2012 ...
  • 仪表板布局 使用flexbox测试毛玻璃仪表板的布局。 截屏

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 399
精华内容 159
关键字:

dashboard布局