2013年9月20日金曜日

GridViewを使ってみる(枠線をつける)

今回はGridViewに枠線をつけたいと思います

枠線をつけるために、Viewのbackground属性を利用すると出来るそうですφ(`д´)メモメモ...
まずは、background属性に枠デザイン用のxmlを用意します。


Package Explorerでプロジェクトのresディレクトリを右クリックして、
New > Folder を選択する。


次に、resディレクトリを選択して、
Folder nameに「drawble」と入力して「Finishi」を押す


先ほど作ったディレクトリにxmlファイルを作成します。
先ほど作ったディレクトリを右クリックして、
New > File を選択する。


File nameに「border.xml」と入力して「Finishi」を押す


<?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- ボタンが押されたときの定義 -->
    <item android:state_pressed="true">
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle" >

            <!-- 色 -->
            <solid android:color="#000000" />
            <!-- 枠線の形状 -->
            <stroke
                android:width="1px"
                android:color="#CCCCCC" />
            <!-- パディング -->
            <padding
                android:bottom="2px"
                android:left="2px"
                android:right="2px"
                android:top="2px" />
            <!-- 角の半径を -->
            <corners android:radius="2px" />
        </shape>
    </item>
    <!-- ボタンが押されていないときの定義 -->
    <item android:state_pressed="false">
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle" >

            <!-- 色 -->
            <solid android:color="#FFFFFF" />
            <!-- 枠線の形状 -->
            <stroke
                android:width="1px"
                android:color="#CCCCCC" />
            <!-- パディング -->
            <padding
                android:bottom="2px"
                android:left="2px"
                android:right="2px"
                android:top="2px" />
            <!-- 角の半径を -->
            <corners android:radius="2px" />
        </shape>
    </item>

</selector>

次は、GridViewのレイアウトを作成します。 resディレクトリを右クリックして、 New > Android XML file を選択する。

New Android XML fileが表示されたら、
Resource Typeに「Layout」を選択して、
Fileにはgridと入力します。

RootElementには、GridViewを選択して、「Finish」を押してxmlを作成します。

これで、枠の準備は完了になります。
次はGridViewのレイアウトXMLを用意します
(layoutディレクトリにgrid.xmlが作成されます。)


■grid.xml
先ほど作成したgrid.xmlの中身を下記のように変更します。
(background属性に@drawable/borderを指定する)
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="50dp"
    android:background="@drawable/border"
    android:gravity="center" />
■AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.gridview4"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="8" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.example.gridview4.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
■activity_main.xml
<?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="fill_parent"
    android:orientation="vertical" >

    <GridView
        android:id="@+id/gridView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:numColumns="auto_fit" />

</LinearLayout>


■MainActivity.java
package com.example.gridview4;

import java.util.ArrayList;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.GridView;

public class MainActivity extends Activity {
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // データの初期化
        ArrayList<String> list = new ArrayList<String>();
        
        int length = 100;
        for(int i = 0; i < length; i++){
         list.add(String.valueOf(i));
        }
        
        // アダプターの作成
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.grid, list);
        
        // GridViewの取得
        GridView gridView = (GridView) findViewById(R.id.gridView1);
        
        // データをGridViewへ設定
        gridView.setAdapter(adapter);
    }
    
 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.main, menu);
  return true;
 }
 
}


実行結果は次のようになります。
クリックした箇所が黒色に変わると思います(`・ω・´)シャキーン

以上です(`・ω・´)ゞビシッ!!

参考URL

0 件のコメント:

コメントを投稿