1. 程式人生 > >Android 基礎控制元件(三)

Android 基礎控制元件(三)

10.ScrollView

當介面上要展示的內容大於一屏時,我們就會用到滾動檢視或者滾動檢視的子類。
ScrollView 僅可以上下滾動。
而HorizontalScrollView只可以左右滑動。

但是滾動檢視內只能有一個檢視,所以一般都是將多個檢視放在layout內。
示例程式碼:

<ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="40sp"
                android:text="Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!"
                />

        </LinearLayout>

    </ScrollView>

HorizontalScrollViewScrollView用法類似。

<HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:layout_width="800dp"
                android:layout_height="wrap_content"
                android:textSize="40sp"
                android:text="Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!"
            />
        </LinearLayout>

    </HorizontalScrollView>

11.WebView

<WebView
        android:id="@+id/content_webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
</WebView>


WebView webView = (WebView)findViewById(R.id.content_webView);
        webView.loadUrl("http://www.sina.com");

        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);
        
        webView.setWebViewClient(new WebViewClient(){

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                // 重寫該方法,防止載入網頁時,自動開啟系統瀏覽器
                view.loadUrl(url);

                return true;
            }
        });

12.ListView

ListView就相當於iOS中的UITableView,主要用於顯示內容基本一樣的檢視。

    <ListView
        android:id="@+id/content_list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </ListView>
    
     private String[] data = { "蘋果", "橘子", "香蕉", "桃子", "梨", "獼猴桃", "西瓜", "葡萄", "菠蘿", "芒果", "紅棗", "楊桃", "櫻桃", "哈密瓜", "龍眼", "荔枝"};
     
     ListView listView = (ListView)findViewById(R.id.content_list_view);
        ArrayAdapter<String> adapter = new ArrayAdapter<>(MainActivity.this, android.R.layout.simple_list_item_1, data);
        listView.setAdapter(adapter);

當然,如果我們要的Cell樣式比較複雜,就得自定義Adapter 和 item了。

首先,建立一個表示某一行展示內容的檢視,比如叫 custom_list_view_item.xml
示例程式碼:

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

    <ImageView
        android:id="@+id/item_image_view"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="8dp"
        android:background="#666666"
        />

    <TextView
        android:id="@+id/item_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:textSize="30sp"
        android:text="這是標題"/>

</LinearLayout>

然後,建立一個Adapter繼承自BaseAdapter,其實主要是實現介面類Adapter的一些方法。

示例原始碼:

package com.example.harvey.firstproject;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

public class CustomItemAdapter extends BaseAdapter {

    private ArrayList mData;
    private Context mContext;

    public CustomItemAdapter(ArrayList data, Context context) {
        this.mData = data;
        this.mContext = context;
    }

    @Override
    public int getCount() {
        return mData.size();
    }

    @Override
    public Object getItem(int position) {
        return null;
    }


    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View view, ViewGroup viewGroup) {
        if (view == null) {
            view = LayoutInflater.from(mContext).inflate(R.layout.custom_list_view_item, viewGroup, false);
        }

        String title = mData.get(position).toString();

        // 初始化item的各個元件
        ImageView imageView = (ImageView)view.findViewById(R.id.item_image_view);
        imageView.setImageResource(R.drawable.flower);

        TextView textView = (TextView)view.findViewById(R.id.item_title);
        textView.setText(title);

        return view;
    }
}

最後,在Activity中為listView設定資料來源即可。

ListView listView = (ListView)findViewById(R.id.content_list_view);
        ArrayList<String> list = new ArrayList<String>();
        for (int i = 0; i < data.length ; i++) {
            list.add(data[i]);
        }
        CustomItemAdapter adapter = new CustomItemAdapter(list, MainActivity.this);
        listView.setAdapter(adapter);