Android高級UI組件

進度條類組件
圖像類組件
列表類組件
通用組件

一、進度條

用ProgressBar來標記。

1.Andorid提供了水平進度條、圓形進度條，不加設置默認爲圓形進度條。

想展示實時進度：使用水平進度條
只想顯示在加載：圓形進度條

2.屬性：
①style來修改進度條的樣式：特別注意無前綴andorid
style的屬性值：
?android:attr/progressBarStyleHorizontal，細水平長條進度條
?android:attr/progressBarStyleSmall，小圓形進度條
?android:attr/progressBarStyleLarge，大圓形進度條
@android:style/Widget.ProgressBar.Horizontal，粗水平長條進度條
@android:style/Widget.ProgressBar.Large，旋轉畫面的大圓形進度條
@android:style/Widget.ProgressBar.Small，旋轉畫面的小圓形進度條

②android:max，設置最大值，屬性值可爲具體數值。

③android:progress，設置當前進度，屬性值爲具體數值

3.事件監聽器

實現進度條的實時改變：需創建線程，在線程中循環獲取耗時的進度，並更新進度。

在Android中不支持在主線程中更新UI組件，可以實例化一個Handler對象,即消息處理對象，通過發送消息來更新UI組件。、

對於耗時操作可通過一個線程來模擬

 progressBar= (ProgressBar) findViewById(R.id.pg);
        //消息處理
        mHandler=new Handler() {
            @Override
            public void handleMessage(Message msg) {
                if(msg.what==0x111){
                    progressBar.setProgress(mProgress);
                }
                else
                {
                    Toast.makeText(MainActivity.this, "耗時操作已完成", Toast.LENGTH_SHORT).show();
                    progressBar.setVisibility(View.GONE);
                }
            }
        };
        //創建一個線程，模擬耗時操作
        new Thread(new Runnable() {
            @Override
            public void run() {
                while(true)
                {
                    mProgress=doWork();
                    Message m=new Message();
                    if(mProgress<100){
                        m.what=0x111;//耗時操作未完成，爲自定義代碼，一般以0x開頭
                        mHandler.sendMessage(m);
                    }
                    else
                    {
                        m.what=0x110;//耗時操作已完成
                        mHandler.sendMessage(m);
                        break;
                    }
                }
            }
            private  int doWork()
            {
                mProgress+=Math.random()*10;
                try {
                    Thread.sleep(200);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                return mProgress;
            }
        }).start();//開始線程
    }

二、拖動條

1.用SeekBar來標記。
2.爲進度條的子類，具有進度條擁有的屬性。
3.屬性：
①android:thumb，修改拖動條的小點，屬性值可爲圖片資源
②android:max，設置最大值，屬性值可爲具體數值。
③android:progress，設置當前進度，屬性值爲具體數值

三、星級評分條

用RatingBar標記，默認星星爲灰色的

1.屬性
①android:numStars，設置評分條的星星個數
②android:rating，屬性值爲數值，設置初始點亮個數
③android:stepSize，設置最小點亮星數。
④android:isIndicator，屬性值爲布爾類型，爲true時，評分條只能看不能改

四、圖像視圖

用來顯示圖片，用ImageView來添加。

爲圖像組件，屬性：
①android:src，顯示圖片

②設置縮放方式
android:scaleType=“fitXY” //把圖片按照指定的大小在ImageView中顯示，拉伸顯示圖片，不保持原比例，填滿ImageView.
android:scaleType=“fitStart”//把原圖按照比例放大縮小到ImageView的高度，顯示在ImageView的start（前部/上部）
…
③設置最大寬度、高度：
android:adjustViewBounds=“true”//可設置最大高度，寬度…
android:maxWidth=“100dp”
android:maxHeight=“100dp”

④設置圖片着色
android:tint，

擴展：只允許橫屏模式，
則在manifests的activity後添加android:screenOrientation="landscape">

五、圖像切換器

實現帶動畫效果的圖片切換功能。

使用ImageSwitcher來添加。

設置初始圖片：

 imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                //創建一個圖片對象
                ImageView imageView=new ImageView(MainActivity.this);
                //給該對象設置圖片
                imageView.setImageResource(arrayPicture[index]);
                return imageView;
            }
        });

使用Java代碼來實現切換動畫效果

ImageSwitcher imageSwitcher；

 imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this,
 android.R.anim.fade_out));//設置淡出

六、網格視圖

按行列分佈方式顯示多個組件

用GridView添加網格視圖。

要顯示圖片，要設置一個適配器（Adapter），適配器：連接後端數據與前端顯示的接口，是數據和UI組件中的重要紐帶。要添加適配器，要在Java文件中寫代碼

四個常用適配器：
ArrayAdapter，數組適配器，將數組的多個值包裝成列表項，只能顯示一行文字。
SmipleAdapter，把List的多個值包裝成多個列表項。
SmipleCursorAdapter，將數據庫的內容以列表的形式展示出來。
BaseAdapter，對各個列表項進行最大限度的定製。

屬性：
android:numColumns，設置列數，屬性值爲數值或auto_fit（自動排列）。

**MainActivity.java**
package com.mingrisoft.qqal;

import android.content.Context;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageButton;
import android.widget.ImageView;

public class MainActivity extends ActionBarActivity {
    //放置圖片資源id的int數組。
    private int[] picture=new int[]{
            R.drawable.t1,R.drawable.t2,R.drawable.t3,R.drawable.t4,
            R.drawable.t5,R.drawable.t6,R.drawable.t7,R.drawable.t8,
            R.drawable.t9

    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //獲取網格視圖
        GridView gridView= (GridView) findViewById(R.id.gridview);
        //將適配器加入到網格視圖中
        gridView.setAdapter(new ImageAdpter(this));
    }
    //自定義一個適配器，繼承自BaseAdapter
    public class ImageAdpter extends BaseAdapter{
        //上下文對象
        private Context mContext;
        public ImageAdpter(Context c){
            mContext=c;
        }

        @Override
        public int getCount() {
            return picture.length;
        }

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

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

        @Override
        public View getView(int i, View view, ViewGroup viewGroup) {
            ImageView imageView;
            if(view==null)
            {
                imageView=new ImageView(mContext);
                //設置大小
                imageView.setLayoutParams(new GridView.LayoutParams(100,90));
                //設置顯示形式
                imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

            }
            else
            {
                imageView=(ImageView)view;
            }
            imageView.setImageResource(picture[i]);
            return imageView;
        }
    }
}

**layout.xml文件**
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.mingrisoft.qqal.MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="2020年2月7日" />

    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="auto_fit"
        android:layout_gravity="center"
        android:verticalSpacing="5dp"
        android:columnWidth="100dp"></GridView>
</LinearLayout>

七、下拉列表框

使用Spinner添加

屬性：
android:entries，添加下拉列表項，屬性值爲數組資源。
下拉列表框可使用entries來設置或使用適配器來指定。
一般使用適配器

1、使用適配器：

        //字符串數組，數據源
        String[] ctype=new String[]{"全部","美術","音樂","體育"};
        //設置常量（final）數組適配器，內含元素爲字符串,第一個參數this爲上下文指針
        // 第二個參數android.R.layout.simple_spinner_item爲android提供的外觀形式，第三個參數爲顯示文字
        final ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item,ctype);
        //設置下拉菜單樣式，android.R.layout.simple_spinner_dropdown_item爲android提供的外觀樣式
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        //獲取下拉列表框
        Spinner spinner= (Spinner) findViewById(R.id.spinner);
        //將ArrayAdapter 添加Spinner 對象中
        spinner.setAdapter(adapter);
       //事件監聽器，此時爲：項目被選擇時監聽器
        spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
                //獲取選中值，並將其變成字符串。
                String str = adapterView.getItemAtPosition(i).toString();
                //輸出
                Toast.makeText(MainActivity.this, str, Toast.LENGTH_LONG).show();
            }

            @Override
            public void onNothingSelected(AdapterView<?> adapterView) {

            }
        });

    }

2、使用entries

android:entries="@array/ctype"

//在value中新建一個array.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="ctype">
        <item>全部</item>
        <item>電影/電視</item>
        <item>圖書</item>
        <item>唱片</item>
        <item>小事</item>
        <item>用戶</item>
        <item>小組</item>
        <item>羣聊</item>
        <item>遊戲/應用</item>
        <item>活動</item>
    </string-array>
</resources>

特別注意：在下拉列表中，設置的是選擇事件監聽器，在列表視圖中是點擊事件監聽器！！

八、列表視圖

用ListView來標記。
列表項可使用entries來設置或使用適配器來指定。

使用適配器

 //字符串數組
        String[] ctype=new String[]{"全部","圖書","遊戲","電視"};
        //設置適配器，元素爲String、
        ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,ctype);
        //獲取列表視圖
        ListView listView= (ListView) findViewById(R.id.listview);
        //將適配器放入列表視圖
        listView.setAdapter(adapter);
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                String str=adapterView.getItemAtPosition(i).toString();
                Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();
            }
        });

九、滾動視圖

使用ScrollView/HorizontalScrollView來添加。
其中，HorizontalScrollView爲水平滾動條，ScrollView爲豎直滾動條。

特別注意，一個滾動視圖中只能添加一個組件，若想放置多個，需用一個佈局管理器括起來
添加滾動視圖的兩種方法：
1、在xml文件中添加
2、在Java文件中添加

在xml中添加

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.mingrisoft.demo.MainActivity">

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textSize="50sp"
            android:text="@string/content"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textSize="50sp"
            android:text="@string/content"/>
        </LinearLayout>
    </HorizontalScrollView>
</RelativeLayout>

在Java文件中添加

使用構造方法ScrollView(Context c)創建一個滾動式圖
應用addView()方法添加組件到滾動視圖中
將滾動視圖添加到佈局管理器中。

例子如下：
acitivity_main.xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.mingrisoft.javascrollview.MainActivity">

</LinearLayout>

Activity_main.java文件

package com.mingrisoft.javascrollview;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ScrollView;
import android.widget.TextView;

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //獲得xml中的根佈局管理器
        LinearLayout ll= (LinearLayout) findViewById(R.id.ll);
        //創建一個佈局管理器對象，用來將兩個組件（ImageView和TextView）括起來
        LinearLayout ll2=new LinearLayout(MainActivity.this);
        //設置爲垂直線性
        ll2.setOrientation(LinearLayout.VERTICAL);
        //創建滾動視圖
        ScrollView scrollView=new ScrollView(MainActivity.this);
        //把滾動視圖放入根佈局管理器
        ll.addView(scrollView);
        //將垂直線性管理器放入根佈局管理器
        scrollView.addView(ll2);
        //創建圖像視圖並添加
        ImageView imageView=new ImageView(MainActivity.this);
        imageView.setImageResource(R.drawable.tt1);
        ll2.addView(imageView);
        //創建文本框並添加
        TextView textView=new TextView(MainActivity.this);
        textView.setText(R.string.context);
        ll2.addView(textView);
    }
}

十、選項卡

多標籤頁界面
作用：使界面簡潔大方，減少窗體個數。

如何添加，使用選項卡？
不能通過具體組件在xml文件中直接添加，需4個步驟。

在佈局文件中添加TabHost、TabWidget、TabContent組件。前兩個在佈局文件中有具體標記，後一個需要FrameLayout來實現。
編寫各標籤頁的XML佈局文件，即有幾個標籤頁就編寫幾個佈局文件，佈局文件中的內容即爲選項卡中顯示的內容。
獲取並初始化TabHost組件。
爲TabHost對象添加標籤頁

實例：

activity_main.xml文件

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.mingrisoft.demo2.MainActivity">
    <!--因爲要添加兩個組件，所以要用LinearLayout括起來 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <!-- id爲android預定好的id -->
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            ></TabWidget>
        <!-- TabContent-->
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </FrameLayout>
    </LinearLayout>

</TabHost>

設計視圖：其中上面的TAB LABEL爲添加的TabWeiget，下面爲FrameLayout

tab1.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="match_parent"
    android:id="@+id/left"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/s1"/>
</LinearLayout>

tab2.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="match_parent"
    android:id="@+id/right"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/s2"/>

</LinearLayout>

MainActivity.java文件

package com.mingrisoft.demo2;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.TabHost;

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //獲取xml中TabHost對象
        TabHost tabHost= (TabHost) findViewById(android.R.id.tabhost);
        //對組件初始化
        tabHost.setup();
        //添加2個標籤頁，需聲明並實例化LayoutInflater
        LayoutInflater inflater=LayoutInflater.from(this);
        inflater.inflate(R.layout.tab1,tabHost.getTabContentView());
        inflater.inflate(R.layout.tab2,tabHost.getTabContentView());
        //addTab爲添加標籤頁，newTabSpec指定標籤頁，，setIndicator指定文字，setContent指定內容
        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("文字").setContent(R.id.left));
        tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("主題").setContent(R.id.right));
    }
}

Android高級UI組件

一、進度條

二、拖動條

三、星級評分條

四、圖像視圖

五、圖像切換器

六、網格視圖

七、下拉列表框

八、列表視圖

九、滾動視圖

十、選項卡

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

Android Activity詳解

vb.net禁止用戶改變窗體大小/運行界面不全。

Android高級UI組件

JAVA進階面向對象程序設計第8周異常處理和輸入輸出

前端入門 HTML筆記（二）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結