ScrollView + TableLayout 详解

遇见的问题
<1>.出现不能滑动的问题
解决方案:
1.确认scrollView的大小比需要显示的view的大小小一点
2.实在不行再tableView外面嵌套一层LinerLayout
3.使用include惰性加载的方法可以使其滑动

activitytable.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="125dp"
    xmlns:tools="http://schemas.android.com/tools"
    android:scrollbars="vertical"
    android:id="@+id/scroll_root"
    android:fitsSystemWindows="true"
    android:clipToPadding="false"
    tools:context="com.yqq.touchtest.TableActivity">

    <include
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        layout="@layout/tablelayout">
    </include>
</ScrollView>

tablelayout.xml

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    android:id="@+id/activity_table"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/azure"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <TableRow
        style="@style/table_row"
        >
        <ImageView
            android:id="@+id/one_one"
            style="@style/img_view"
            />
        <ImageView
            android:id="@+id/one_two"
            style="@style/img_view"
            />
        <ImageView
            android:id="@+id/one_three"
            style="@style/img_view"
            />
        <ImageView
            android:id="@+id/one_four"
            style="@style/img_view"
            />
    </TableRow>
    <TableRow
        style="@style/table_row"
        >
        <ImageView
            android:id="@+id/two_one"
            style="@style/img_view"
            />
        <ImageView
            android:id="@+id/two_two"
            style="@style/img_view"
            />
        <ImageView
            android:id="@+id/two_three"
            style="@style/img_view"
            />
        <ImageView
            android:id="@+id/two_four"
            style="@style/img_view"
            />
    </TableRow>
    <TableRow
        style="@style/table_row"
        >
        <ImageView
            android:id="@+id/three_one"
            style="@style/img_view"
            />
        <ImageView
            android:id="@+id/three_two"
            style="@style/img_view"
            />
        <ImageView
            android:id="@+id/three_three"
            style="@style/img_view"
            />
        <ImageView
            android:id="@+id/three_four"
            style="@style/img_view"
            />
    </TableRow>
</TableLayout>

styles.xml文件上添加以下自定义样式

<style name="img_view">
        <item name="android:src">@mipmap/ic_launcher</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:paddingTop">10dp</item>
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:minHeight">0dp</item>
        <item name="android:minWidth">0dp</item>
        <item name="android:onClick">tableClick</item>
        <item name="android:background">@drawable/ll_layer_item_select_bg</item>
    </style>

    <style name="table_row">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
    </style>

效果图

自定义控件实现相同效果
在这里我大致讲一下自己的实现思路，通过自定义控件然后为其赋予自定义属性，使用的时候记得在布局文件加上xmlns:yqq=”http://schemas.android.com/apk/res-auto”这个是用来声明自定义命名空间的，然后需要注意的是为了能够使这个视图能够滑动到状态栏下面，在主布局需要添加android:clipToPadding=”false”，将布局初始在状态栏的底端android:fitsSystemWindows=”true”，需要注意的还有各控件之间的宽高的限制，宽都需要用到match_parent,最后为了简化布局代码，自定义style简化代码。

1.声明一个自定义控件的类

package com.yqq.touchtest;

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * Created by user on 2017/2/4.
 */

public class MyImageView extends LinearLayout{

    private ImageView imageView;//图片
    private TextView textView;//图像下面的文本
    private View view;

    public MyImageView(Context context) {
        super(context);
    }

    public MyImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context,attrs);
    }

    public MyImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context,attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        setOrientation(VERTICAL);
        //获取自定义属性
        TypedArray tarray = context.obtainStyledAttributes(attrs,R.styleable.MyImageView);
        CharSequence cstring = tarray.getText(R.styleable.MyImageView_imgtext);
        int resId = tarray.getResourceId(R.styleable.MyImageView_src,-1);
//这个参数是用了设置布局参数的
        LinearLayout.LayoutParams lpContent =
                new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                        ViewGroup.LayoutParams.WRAP_CONTENT);
                        //这个控件的布局是一个自定义布局
        view = LayoutInflater.from(getContext()).inflate(R.layout.myimageviewlayout,this,true);

        imageView = (ImageView) view.findViewById(R.id.myimg);
        textView = (TextView) view.findViewById(R.id.mytext);

        //是否给左边按钮赋予图片属性
        if(resId !=-1){
            imageView.setVisibility(VISIBLE);
            imageView.setImageResource(resId);
        }else{
            imageView.setVisibility(INVISIBLE);
        }
        imageView.setImageResource(resId);
        textView.setText(cstring);
    }

}

2.编写布局代码放在res-layout文件夹下，myimageviewlayout.xml

<?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="wrap_content"
    android:orientation="vertical"
    >

    <ImageView
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:src="@mipmap/ic_launcher"
        android:layout_gravity="center_horizontal"
        android:id="@+id/myimg"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="text"
        android:gravity="center_horizontal"
        android:id="@+id/mytext"
        />
</LinearLayout>

3.在res-values 下的attrs.xml文件夹下面声明以下属性

 <declare-styleable name="MyImageView">
        <attr name="imgtext" format="string"></attr>
        <attr name="src" format="reference"></attr>
    </declare-styleable>

4.自定义style，在res-values文件夹下面的styles.xml下添加以下属性

<style name="myimg_view">
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:onClick">tableClick</item>
        <item name="android:background">@drawable/ll_layer_item_select_bg</item>
    </style>

5.Activity的布局如下

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    xmlns:tools="http://schemas.android.com/tools"
    android:scrollbars="vertical"
    android:id="@+id/scroll_root"
    android:fitsSystemWindows="true"
    android:clipToPadding="false"
    tools:context="com.yqq.touchtest.TableActivity">

    <include
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        layout="@layout/tablelayout">
    </include>

</ScrollView>

6.tablelayout.xml

<?xml version="1.0" encoding="utf-8"?>
<TableLayout android:id="@+id/activity_table"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/azure"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:yqq="http://schemas.android.com/apk/res-auto">


    <TableRow
        style="@style/table_row"
        >
        <com.yqq.touchtest.MyImageView
            yqq:src="@mipmap/ic_launcher"
            yqq:imgtext="我的足迹"
            style="@style/myimg_view"
            />
        <com.yqq.touchtest.MyImageView
            yqq:src="@mipmap/ic_launcher"
            yqq:imgtext="我的足迹"
            style="@style/myimg_view"
            />
        <com.yqq.touchtest.MyImageView
            yqq:src="@mipmap/ic_launcher"
            yqq:imgtext="我的足迹"
            style="@style/myimg_view"
            />
        <com.yqq.touchtest.MyImageView
            yqq:src="@mipmap/ic_launcher"
            yqq:imgtext="我的足迹"
            style="@style/myimg_view"
            />
    </TableRow>
    <TableRow
        style="@style/table_row"
        >
        <com.yqq.touchtest.MyImageView
            yqq:src="@mipmap/ic_launcher"
            yqq:imgtext="我的足迹"
            style="@style/myimg_view"
            />
        <com.yqq.touchtest.MyImageView
            yqq:src="@mipmap/ic_launcher"
            yqq:imgtext="我的足迹"
            style="@style/myimg_view"
            />
        <com.yqq.touchtest.MyImageView
            yqq:src="@mipmap/ic_launcher"
            yqq:imgtext="我的足迹"
            style="@style/myimg_view"
            />
        <com.yqq.touchtest.MyImageView
            yqq:src="@mipmap/ic_launcher"
            yqq:imgtext="我的足迹"
            style="@style/myimg_view"
            />
    </TableRow>
    <TableRow
        style="@style/table_row"
        >
        <com.yqq.touchtest.MyImageView
            yqq:src="@mipmap/ic_launcher"
            yqq:imgtext="我的足迹"
            style="@style/myimg_view"
            />
        <com.yqq.touchtest.MyImageView
            yqq:src="@mipmap/ic_launcher"
            yqq:imgtext="我的足迹"
            style="@style/myimg_view"
            />
        <com.yqq.touchtest.MyImageView
            yqq:src="@mipmap/ic_launcher"
            yqq:imgtext="我的足迹"
            style="@style/myimg_view"
            />
        <com.yqq.touchtest.MyImageView
            yqq:src="@mipmap/ic_launcher"
            yqq:imgtext="我的足迹"
            style="@style/myimg_view"
            />
    </TableRow>
</TableLayout>

最终效果如图

关于沉浸状态栏的实现可以看博主的这篇博客，新手勿喷，希望对大家有所帮助，沉浸状态栏的实现