zoukankan      html  css  js  c++  java
  • Android 自定义表格显示数据

    Android 自定义TextView控件,用来组成表格方便数据的展示。

    首先看一下效果

    样式不是很好看,需要用的可以自己优化一下。

    实现方式很简单。

      1、自定义控件 MyTableTextView 继承 TextView 重写onDraw方法。在里面添加话边框的操作。

     1 package lyf.com.mytableview;
     2 
     3 import android.content.Context;
     4 import android.graphics.Canvas;
     5 import android.graphics.Color;
     6 import android.graphics.Paint;
     7 import android.util.AttributeSet;
     8 import android.widget.TextView;
     9 
    10 /**
    11  * lyf on 2016/06/27
    12  * 自定义TextView
    13  */
    14 public class MyTableTextView extends TextView {
    15 
    16     Paint paint = new Paint();
    17 
    18     public MyTableTextView(Context context, AttributeSet attrs) {
    19         super(context, attrs);
    20         int color = Color.parseColor("#80b9f2");
    21         // 为边框设置颜色
    22         paint.setColor(color);
    23     }
    24 
    25     @Override
    26     protected void onDraw(Canvas canvas) {
    27         super.onDraw(canvas);
    28         // 画TextView的4个边
    29         canvas.drawLine(0, 0, this.getWidth() - 1, 0, paint);
    30         canvas.drawLine(0, 0, 0, this.getHeight() - 1, paint);
    31         canvas.drawLine(this.getWidth() - 1, 0, this.getWidth() - 1, this.getHeight() - 1, paint);
    32         canvas.drawLine(0, this.getHeight() - 1, this.getWidth() - 1, this.getHeight() - 1, paint);
    33     }
    34 }
    View Code

      2、主布局,什么也不用写。直接放一个LinearLayout就好。但因为表格的宽度和高度往往超过屏幕的宽高度,因此需要我们添加ScrollView 和HorizontalScrollView。为了让HorizontalScrollView填满整个ScrollView 需要在ScrollView设置属性 android:fillViewport="true"。

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fillViewport="true"
            android:scrollbars="none"
            >
    
            <HorizontalScrollView
                android:id="@+id/scroll_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scrollbarAlwaysDrawHorizontalTrack="false"
                android:scrollbars="none">
    
                <LinearLayout
                    android:id="@+id/MyTable"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="9dp"
                    android:orientation="vertical"
                    >
                </LinearLayout>
    
            </HorizontalScrollView>
        </ScrollView>
    </LinearLayout>
    View Code

      3、接下来写表格显示的样式文件table.xml。该布局文件用来显示表格每一行的样式。

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="match_parent">
    
        <lyf.com.mytableview.MyTableTextView
            android:id="@+id/list_1_1"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/list_1_2"
            android:layout_alignTop="@+id/list_1_2"
            android:gravity="center"
            android:textColor="#000"
            android:textSize="13sp" />
    
        <lyf.com.mytableview.MyTableTextView
            android:id="@+id/list_1_2"
            android:layout_width="180dp"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/list_1_1"
            android:gravity="center"
            android:textColor="#000"
            android:textSize="13sp" />
    
        <lyf.com.mytableview.MyTableTextView
            android:id="@+id/list_1_3"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/list_1_2"
            android:layout_alignTop="@+id/list_1_2"
            android:layout_toRightOf="@+id/list_1_2"
            android:gravity="center"
            android:textColor="#000"
            android:textSize="13sp" />
    
        <lyf.com.mytableview.MyTableTextView
            android:id="@+id/list_1_4"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/list_1_3"
            android:layout_alignTop="@+id/list_1_3"
            android:layout_toRightOf="@+id/list_1_3"
            android:gravity="center"
            android:textColor="#000"
            android:textSize="13sp" />
    
        <lyf.com.mytableview.MyTableTextView
            android:id="@+id/list_1_5"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/list_1_4"
            android:layout_alignTop="@+id/list_1_4"
            android:layout_toRightOf="@+id/list_1_4"
            android:gravity="center"
            android:textColor="#000"
            android:textSize="13sp" />
    
        <lyf.com.mytableview.MyTableTextView
            android:id="@+id/list_1_6"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/list_1_5"
            android:layout_alignTop="@+id/list_1_5"
            android:layout_toRightOf="@+id/list_1_5"
            android:gravity="center"
            android:textColor="#000"
            android:textSize="13sp" />
    
    
        <lyf.com.mytableview.MyTableTextView
            android:id="@+id/list_1_7"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/list_1_6"
            android:layout_alignTop="@+id/list_1_6"
            android:layout_toRightOf="@+id/list_1_6"
            android:gravity="center"
            android:textColor="#000"
            android:textSize="13sp" />
    </RelativeLayout>
    View Code

      4、最后把数据放到我们的table.xml文件中,并显示到我们的主布局文件中。

    package lyf.com.mytableview;
    
    import android.app.Activity;
    import android.graphics.Color;
    import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.widget.LinearLayout;
    import android.widget.RelativeLayout;
    
    /**
     * lyf on 2016/06/27
     * 自定义表格显示
     */
    
    public class MainActivity extends Activity {
    
        private LinearLayout mainLinerLayout;
        private RelativeLayout relativeLayout;
        private String[] name={"序号","考号","姓名","出生年月","语文","数学","英语"};
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            mainLinerLayout = (LinearLayout) this.findViewById(R.id.MyTable);
            initData();
        }
    
        //绑定数据
        private void initData() {
            //初始化标题
            relativeLayout = (RelativeLayout) LayoutInflater.from(this).inflate(R.layout.table, null);
            MyTableTextView title = (MyTableTextView) relativeLayout.findViewById(R.id.list_1_1);
            title.setText(name[0]);
            title.setTextColor(Color.BLUE);
    
            title = (MyTableTextView) relativeLayout.findViewById(R.id.list_1_2);
            title.setText(name[1]);
            title.setTextColor(Color.BLUE);
            title = (MyTableTextView) relativeLayout.findViewById(R.id.list_1_3);
            title.setText(name[2]);
            title.setTextColor(Color.BLUE);
            title = (MyTableTextView) relativeLayout.findViewById(R.id.list_1_4);
            title.setText(name[3]);
            title.setTextColor(Color.BLUE);
            title = (MyTableTextView) relativeLayout.findViewById(R.id.list_1_5);
            title.setText(name[4]);
            title.setTextColor(Color.BLUE);
            title = (MyTableTextView) relativeLayout.findViewById(R.id.list_1_6);
            title.setText(name[5]);
            title.setTextColor(Color.BLUE);
            title = (MyTableTextView) relativeLayout.findViewById(R.id.list_1_7);
            title.setText(name[6]);
            title.setTextColor(Color.BLUE);
            mainLinerLayout.addView(relativeLayout);
    
            //初始化内容
            int number = 1;
            for (int i=0;i<10;i++) {
                relativeLayout = (RelativeLayout) LayoutInflater.from(this).inflate(R.layout.table, null);
                MyTableTextView txt = (MyTableTextView) relativeLayout.findViewById(R.id.list_1_1);
                txt.setText(String.valueOf(number));
    
                txt = (MyTableTextView) relativeLayout.findViewById(R.id.list_1_2);
                txt.setText("320321**********35");
                txt = (MyTableTextView) relativeLayout.findViewById(R.id.list_1_3);
                txt.setText("张三");
                txt = (MyTableTextView) relativeLayout.findViewById(R.id.list_1_4);
                txt.setText("1992/04/21");
                txt = (MyTableTextView) relativeLayout.findViewById(R.id.list_1_5);
                txt.setText("150");
                txt = (MyTableTextView) relativeLayout.findViewById(R.id.list_1_6);
                txt.setText("200");
                txt = (MyTableTextView) relativeLayout.findViewById(R.id.list_1_7);
                txt.setText("120");
                mainLinerLayout.addView(relativeLayout);
                number++;
            }
        }
    }
    View Code

      

         下载链接

  • 相关阅读:
    腾讯云短信接口完成验证码功能
    git使用的简要介绍
    drf分页组件补充
    drf中的jwt使用与手动签发效验
    django的认证演变过程分析
    drf三大认证补充
    drf三大认证
    IO事件
    配置Java环境变量
    各种O
  • 原文地址:https://www.cnblogs.com/Jett/p/5620236.html
Copyright © 2011-2022 走看看