android 布局实例解析 柱状图效果

最新推荐文章于 2024-08-31 15:33:35 发布
最新推荐文章于 2024-08-31 15:33:35 发布
阅读量1.1k 收藏 1
点赞数 1
分类专栏： AndroidUi设计 文章标签： 柱状图 android柱状图 android自定义图表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aojiancc2/article/details/44997597
版权



一：LinearLayout+RelativeLayout图表效果


       

            1：每个柱子外面是RelativeLayout里边LinearLayout，使用android:layout_alignParentBottom="true"在父容器底部对齐

                  用背景颜色控制即可

            2：中间文字水平垂直居中:

                   父容器控制水平居中android:layout_alignParentBottom="true"

                   自己垂直居中 android:layout_gravity="center_vertical"   

 <RelativeLayout
        android:layout_width="90dp"
        android:layout_height="160dp"
        android:layout_marginTop="90dp"
        android:background="#E5E4E3"
         >
        <LinearLayout 
            android:layout_width="100dp"
            android:layout_height="30dp"
            android:background="#FF9B58"
            android:layout_alignParentBottom="true"
            android:gravity="center_horizontal"
            >
            <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center_vertical"
                 android:textColor="#ffffff" 
                 android:text="17.8T"
                />
        </LinearLayout>
        
    </RelativeLayout>

             3：三个柱子左右两边间距保持一样

                  只需要在外层水平居中就可以了，外层的宽度等于内容宽度    android:layout_width="wrap_content"

           


            所有布局文件1版

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_horizontal"
    android:background="#ffffff"
    android:orientation="vertical" >

    <LinearLayout
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:orientation="horizontal"
           android:layout_marginTop="30dp"
           android:layout_gravity="center_horizontal"
           android:gravity="center_horizontal"
         >
    <RelativeLayout
        android:layout_width="90dp"
        android:layout_height="160dp"
        android:layout_marginTop="90dp"
        android:background="#E5E4E3"
         >
        <LinearLayout 
            android:layout_width="100dp"
            android:layout_height="30dp"
            android:background="#FF9B58"
            android:layout_alignParentBottom="true"
            android:gravity="center_horizontal"
            >
            <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center_vertical"
                 android:textColor="#ffffff" 
                 android:text="17.8T"
                />
        </LinearLayout>
        
    </RelativeLayout>
    
       <RelativeLayout
        android:layout_width="90dp"
        android:layout_height="160dp"
        android:layout_marginTop="90dp"
        android:layout_marginLeft="10dp"
        android:background="#E5E4E3"
         >
        <LinearLayout 
            android:layout_width="100dp"
            android:layout_height="60dp"
            android:background="#81CDE7"
            android:layout_alignParentBottom="true"
            android:gravity="center_horizontal"
            >
            <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center_vertical"
                 android:textColor="#ffffff" 
                 android:text="37.8T"
                />
        </LinearLayout>
        
    </RelativeLayout>
    
         <RelativeLayout
        android:layout_width="90dp"
        android:layout_height="160dp"
        android:layout_marginTop="90dp"
        android:background="#E5E4E3"
          android:layout_marginLeft="10dp"
         >
        <LinearLayout 
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:background="#81CDE7"
            android:layout_alignParentBottom="true"
            android:gravity="center_horizontal"
            >
            <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center_vertical"
                 android:textColor="#ffffff" 
                 android:text="20T"
                />
        </LinearLayout>
        
    </RelativeLayout>
   </LinearLayout>
</LinearLayout>

    2版

        

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_horizontal"
    android:background="#ffffff"
    android:orientation="vertical" >
   
    <LinearLayout 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
          android:layout_gravity="center_horizontal"
        >
        
	    <LinearLayout 
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:layout_marginTop="30dp"
	        >
	         <LinearLayout 
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:layout_marginTop="30dp"
	        >
	         <TextView
	           android:layout_width="wrap_content"
	           android:layout_height="wrap_content"
	           android:textColor="#777777"
	           android:text="主机运行状态:"
	             />  
	         <TextView
	           android:layout_width="wrap_content"
	           android:layout_height="wrap_content"
	           android:textColor="#ffffff"
	           android:background="#7EB100"
	           android:text="主机运转中"
	            />   
	       </LinearLayout>  
	        <LinearLayout 
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:layout_marginTop="30dp"
	        android:layout_marginLeft="10dp"
	        >
	         <TextView
	           android:layout_width="wrap_content"
	           android:layout_height="wrap_content"
	           android:textColor="#ffffff"
	           android:background="#7EB100"
	           android:text="平均油耗"
	            />  
	       </LinearLayout>  
	    </LinearLayout>     
    
    
    
    <LinearLayout
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:orientation="horizontal"
           android:layout_marginTop="5dp"
           android:layout_gravity="center_horizontal"
           android:gravity="center_horizontal"
         >
         
    <LinearLayout 
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:orientation="vertical"
        >
    <RelativeLayout
        android:layout_width="90dp"
        android:layout_height="160dp"
        android:layout_marginTop="90dp"
        android:background="#E5E4E3"
         >
        <LinearLayout 
            android:layout_width="100dp"
            android:layout_height="30dp"
            android:background="#FF9B58"
            android:layout_alignParentBottom="true"
            android:gravity="center_horizontal"
            >
            <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center_vertical"
                 android:textColor="#ffffff" 
                 android:text="17.8T"
                />
        </LinearLayout>
    </RelativeLayout>
        <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center_horizontal"
                 android:textColor="#777777"
                 android:text="油舱mz"
                />
    </LinearLayout>    
    
    
     <LinearLayout 
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:orientation="vertical"
        >
        
       <RelativeLayout
        android:layout_width="98dp"
        android:layout_height="160dp"
        android:layout_marginTop="90dp"
        android:layout_marginLeft="10dp"
        android:id="@+id/firshOilF"
        android:background="#E5E4E3"
         >
        <LinearLayout 
            android:layout_width="100dp"
            android:layout_height="60dp"
            android:background="#81CDE7"
            android:id="@+id/firshOilBox"
            android:layout_alignParentBottom="true"
            android:gravity="center_horizontal"
            >
            <TextView
                 android:id="@+id/firshOilBoxText"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center_vertical"
                 android:textColor="#ffffff" 
                 android:text="37.8T"
                />
        </LinearLayout>       
    </RelativeLayout>
       <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center_horizontal"
                 android:textColor="#777777"
                 android:layout_marginLeft="5dp"
                 android:text="1号储油柜"
                />
    </LinearLayout>   
    
     
        <LinearLayout 
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:orientation="vertical"
        >
         <RelativeLayout
        android:layout_width="90dp"
        android:layout_height="160dp"
        android:layout_marginTop="90dp"
        android:background="#E5E4E3"
          android:layout_marginLeft="10dp"
         >
        <LinearLayout 
            android:layout_width="100dp"
            android:layout_height="40dp"
            android:background="#81CDE7"
            android:layout_alignParentBottom="true"
            android:gravity="center_horizontal"
            >
            <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center_vertical"
                 android:textColor="#ffffff" 
                 android:text="20T"
                />
        </LinearLayout>
        
    </RelativeLayout>
        <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center_horizontal"
                 android:textColor="#777777"
                 android:text="2号储油柜"
                 android:layout_marginLeft="5dp"
                />
    </LinearLayout>                 
   </LinearLayout>
   </LinearLayout>
</LinearLayout>
    

         后台效果

public class TestChat extends Activity{

	 @Override
	 protected void onCreate(Bundle savedInstanceState) {
	        super.onCreate(savedInstanceState);
	        setContentView(R.layout.testchat);
	        SetOil(100,70);
	 }  
	 	 
	 private void SetOil(double maxoval, double currentovl)//maxoval最高刻度,当前油量currentovl
	 {		
		 TextView tv = (TextView)findViewById(R.id.firshOilBoxText);
		 tv.setText(currentovl+"T");
		
		 LinearLayout ly = (LinearLayout)findViewById(R.id.firshOilBox);
		 RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams)ly.getLayoutParams();
		 
		 RelativeLayout lyf = (RelativeLayout)findViewById(R.id.firshOilF);
		 LinearLayout.LayoutParams lpf = (LinearLayout.LayoutParams)lyf.getLayoutParams();
		 
		 double precendvalue = (currentovl/maxoval);//先计算所占高度的百度分
		 System.out.println("百分比:"+precendvalue);
		 int needheight = (int)(precendvalue*lpf.height);//在取得该百分比在当前高度下占有的高度,获取到的单位已经是dp不用再转化了		 
		 lp.height = needheight;
		 ly.setLayoutParams(lp);				
	 }
	 	 
	 public int Dp2Px(Context context, float dp) { 
		    final float scale = context.getResources().getDisplayMetrics().density; 
		    return (int) (dp * scale + 0.5f); 
     }
}








tnblog技术分享～
关注
专栏目录
android中画柱状图
04-08
这个文件时android代码，实现了在android中画出我们在电脑中常见的股市之类的柱状图！很有学习研究的价值！欢迎下载！！！
Android之柱状图
12-06
一个简单的小柱状图demo， 只是了解一下大部分方法的使用 有较详细的注释，
Android统计图表之柱状图（条形图）
热门推荐
Zhang Phil
08-17 1万+
 Android统计图表之柱状图（条形图） 柱状图是统计图表中经常用到的一种图表，比如降雨量之类的统计展示。我之前写了一些关于Android上的统计图表库MPAndroidChart，附录了一些我自己写的技术文档，在这些文档中介绍了MPAndroidChart的详细内容。 文章： 1，《Android统计图表MPAndroidChart》，http://blog.csdn.net/zh
全面掌握Android自定义柱形图视图开发
最新发布
weixin_28888459的博客
08-31 1675
本文还有配套的精品资源，点击获取 简介：在Android开发中，自定义View对于创建具有特定功能和外观的UI组件至关重要。本项目“通用柱形图自定义view”展示了如何设计一个可广泛应用于多种数据可视化的柱状图视图。从自定义View基础到数据结构设计，再到绘制逻辑与性能优化，本项目详细介绍了实现定制柱形图的所有关键步骤。 1. 自定义View基础及继承实现 自定...
Android 柱状图
FlyPig_Vip的博客
06-18 667
package com.as.apprehendschool.customviews; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.LinearGradient; import android.graphics.Paint; import android.graphics.Shader; import andro.
Android自定义带增长动画和点击弹窗提示效果的柱状图DEMO
09-01
本案例中，我们将讨论如何创建一个自定义的柱状图组件，它具有动态增长的动画效果和点击后弹出的提示框功能。这个组件适用于展示数据可视化，尤其是在数据统计或分析的应用场景。 首先，自定义柱状图的核心在于`...
Android 折线 柱状图 demo
03-22
在Android开发中，数据可视化是十分重要的，尤其是折线图和柱状图，它们能直观地展示大量数据，便于用户理解和分析。这个"Android 折线 柱状图 demo"是一个实例，它展示了如何在Android应用中创建并使用这两种图表。...
Android可滑动的柱状图
12-02
2. **创建柱状图**：在XML布局文件中添加`BarChart`视图，并在Java或Kotlin代码中获取这个视图实例，初始化柱状图： ```java BarChart barChart = findViewById(R.id.bar_chart); barChart.setDrawBarShadow(false);...
Android画折线图和柱状图
06-29
本文将详细介绍如何在Android应用中实现折线图和柱状图的绘制，以提供清晰、直观的数据展示。 首先，折线图和柱状图是两种常见的统计图表，广泛用于表现数据的变化趋势和比较不同类别的数据量。折线图通过连接一...
android 各种图表例子
05-20
一个借助jar包实现的android的图表的例子，感兴趣的可以下载看下。
Android 各种图表（折线图 柱状图）效果实现集合 源码
10-11
WilliamChart各种图表效果实现大全，有水平线条表格，有柱状表格等。 由LineFragment，BarFragment，StackedFragment，SandboxFragment几个fragment封装实现几种效果。 DrawerFragment来实现简单框架。并且提供接口 /** * Callbacks interface that all activities using this fragment must implement. */ public interface NavigationDrawerCallbacks { void onNavigationDrawerItemSelected(int position); } 给首页回调。 首页MainActivity implements DrawerFragment.NavigationDrawerCallbacks 实现方法用来切换fragment @Override public void onNavigationDrawerItemSelected(int position) { switch (position){ case 0: getSupportFragmentManager().beginTransaction() .replace(R.id.container, new LineFragment()) .commit(); break; case 1: getSupportFragmentManager().beginTransaction() .replace(R.id.container, new BarFragment()) .commit(); break; case 2: getSupportFragmentManager().beginTransaction() .replace(R.id.container, new StackedFragment()) .commit(); break; case 3: mCurrFragment = new SandboxFragment(); getSupportFragmentManager().beginTransaction() .replace(R.id.container, mCurrFragment) .commit(); default: break; } }
Android柱状图
guodashen007的博客
05-07 4027
先来看效果 MPAndroidChart在github上地址：https://github.com/PhilJay/MPAndroidChart 1. 依赖： Project 的build.gradle文件中添加 Project 的build.gradle文件中添加 allprojects { repositories { maven { url '...
一个使用柱状图的案例[转]
abc123098098的博客
09-28 201
客户的系统突然WIO超高： 09:02:23 %usr %sys %wio %idle 09:02:24 15 3 79 4 09:02:25 6 4 86 4 09:02:26 5 3 92 0 09:02:27 8 2 89 1 09:02:28 10 3 82 5 09:02:29 7 2 90 1 09:02:30 7 2 91 0 09:02:31 5 4 9...
Android 柱状图（自定义View）
qq_27494201的博客
08-20 1324
效果图： activity_main.xml： <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-au...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值