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

一：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); 
     }
}