LoginSignup
3
4

More than 5 years have passed since last update.

TextViewでマスクして、下のViewをタッチできないようにする

Last updated at Posted at 2015-11-02

適切なタイトルが思いつきません...。

TextViewをマスクに使用し、ListViewにitemがないときには「List empty」と表示し一部の領域をタッチできないようにするサンプルです。
下という表現ですが、FrameLayout中での「下のレイヤー」を指しています。

サンプルプログラム

MainActivity.java
public class MainActivity extends AppCompatActivity{

    private ListView listView;
    private TextView mask;
    private Button addItem;
    private Button deleteItem;
    private Button foobar;

    private List<String> list;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_listview_untouchable_mask);

        addItem = (Button)findViewById(R.id.add_item);
        addItem.setOnClickListener(onClickListener);

        deleteItem = (Button)findViewById(R.id.delete_item);
        deleteItem.setOnClickListener(onClickListener);

        foobar = (Button)findViewById(R.id.foobar);
        foobar.setOnClickListener(onClickListener);

        mask = (TextView)findViewById(R.id.mask);
        // maskのOnClickListenerにnullを設定することで、その下へのタッチイベントを抑制する
        mask.setOnClickListener(null);

        listView = (ListView)findViewById(R.id.listView);
        list = new ArrayList<>();
    }

    private View.OnClickListener onClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            switch (v.getId()){
                case R.id.add_item:
                    list.add("item");
                    break;

                case R.id.delete_item:
                    if(!list.isEmpty()) {
                        list.remove(list.size() - 1);
                    }
                    break;

                case R.id.foobar:
                    Toast.makeText(MainActivity.this, "foobar", Toast.LENGTH_SHORT).show();
                    break;

                default:
                    break;
            }

            // listが空のときはmaskのVisibilityにVISIBLEを設定(maskを可視化)する
            // そうでない(listにitemがある)ときはVisibilityにINVISIBLEを設定(maskを不可視化)する
            if(list.isEmpty()){
                mask.setVisibility(View.VISIBLE);
            }else{
                mask.setVisibility(View.INVISIBLE);
            }

            ArrayAdapter<String> adapter = new ArrayAdapter<>(MainActivity.this, android.R.layout.simple_list_item_1, list);
            listView.setAdapter(adapter);
        }
    };
}

FrameLayout中のViewの定義の順番に気をつけてください。
一番下に定義したViewが、一番上のレイヤーになります。

activity_listview_untouchable_mask.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/add_item"
        android:text="add item" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/delete_item"
        android:text="delete item" />

    <FrameLayout
        android:orientation="vertical" 
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="foobar"
                android:id="@+id/foobar"/>

            <ListView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/listView"/>
        </LinearLayout>

        <!-- maskに使うViewは、FrameLayoutの一番下に記述する-->
        <!-- backgroundでは、16進数8桁の値を渡した場合、上2桁は透過度を表す-->
        <!-- visibilityには初期値として"visible"を設定する-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="List empty"
            android:textColor="#ffffff"
            android:textSize="20dp"
            android:background="#88000000"
            android:visibility="visible"
            android:id="@+id/mask"/>
    </FrameLayout>
</LinearLayout>

動作結果

ListViewにitemがあるときにはmaskはなく、foobarボタンもタッチイベントを受け取ります。
s_Screenshot_20151103-005219[1].png

ListViewが空の場合にはmaskが可視化され、foobarボタンもタッチイベントが受け取れなくなります。つまりタッチできなくなります。
s_Screenshot_20151103-005212[2].png

ありがとうございました。

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4