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>

最終效果如圖

關於沉浸狀態欄的實現可以看博主的這篇博客，新手勿噴，希望對大家有所幫助，沉浸狀態欄的實現