[AndroidStudio] 加上水平捲動選單 HorizontalScrollView - KnucklesNote板

首頁(home) 上頁(↑) 下頁(↓) 末頁(end)

看板 KnucklesNote

作者 Knuckles (站長那克斯)
標題 [AndroidStudio] 加上水平捲動選單 HorizontalScrollView
時間 2015-12-28 Mon. 22:16:53

水平捲動的選單

在列表的上方加上可水平捲動的選單右邊超出螢幕範圍的部份可用捲動拉過來

修改 activity_main.xml

先將最外層 <RelativeLayout 改成 <LinearLayout
並加上屬性 android:orientation="vertical"
讓內容依垂直排列

在垂直排列的 LinearLayout 裡加上

    <HorizontalScrollView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content">

        <LinearLayout

            android:orientation="horizontal"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content">

            <Button

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Button 1"/>

            <Button

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Button 2"/>

            <Button

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Button 3"/>

            <Button

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Button 4"/>

            <Button

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:text="Button 5"/>

        </LinearLayout>

    </HorizontalScrollView>

在 HorizontalScrollView 裡加上一個水平排列的 LinearLayout
裡面再放入多個 Button
這樣就完成了，執行看看能否水平捲動

修改按鈕樣式

先只放兩個 Button，將樣式改成這樣

把按鈕上的字寫在 strings.xml

    <string name="HotTextTitle">熱門文章</string>

    <string name="BoardListTitle">熱門看板</string>

修改 activity_main.xml 裡的 Button 為

            <Button

                android:id="@+id/button_HotText"

                android:layout_width="wrap_content"

                android:layout_height="36dp"

                android:text="@string/HotTextTitle"

                android:textSize="18sp"

                android:textColor="#000"

                android:background="#CCC" />

            <Button

                android:id="@+id/button_BoardList"

                android:layout_width="wrap_content"

                android:layout_height="36dp"

                android:text="@string/BoardListTitle"

                android:textSize="18sp"

                android:textColor="#9CF"

                android:background="#000" />

將按鈕獨立成一個xml檔

為了避免每一頁的xml都要再寫一次內容相同的水平選單
所以要把他獨立一個xml檔，再用<include>包進來

在 /res/layout 新增一個 layout resource file
名稱輸入 horizontal_menu
內容修改為

<?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="wrap_content">

    <HorizontalScrollView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content">

        <LinearLayout

            android:orientation="horizontal"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content">

            <Button

                android:id="@+id/button_HotText"

                android:layout_width="wrap_content"

                android:layout_height="45dp"

                android:text="@string/HotTextTitle"

                android:textSize="18sp"

                android:textColor="#9CF"

                android:background="#000" />

            <Button

                android:id="@+id/button_BoardList"

                android:layout_width="wrap_content"

                android:layout_height="45dp"

                android:text="@string/BoardListTitle"

                android:textSize="18sp"

                android:textColor="#9CF"

                android:background="#000" />

        </LinearLayout>

    </HorizontalScrollView>

    <View

        android:layout_width="fill_parent"

        android:layout_height="1dp"

        android:background="#CCC" />

</LinearLayout>

按鈕的樣式都先設為未選取，之後再用程式改為選取的樣式
在後面加了一個空的View當分隔線

然後修改 activity_main.xml
將 <HorizontalScrollView> … </HorizontalScrollView> 改為

    <include layout="@layout/horizontal_menu" />

設定點擊按鈕後的動作

修改 MainActivity.java
在 onCreate 裡加上

        Button btnHotText = (Button) findViewById(R.id.button_HotText);

        btnHotText.setOnClickListener(this);

        Button btnBoardList = (Button) findViewById(R.id.button_BoardList);

        btnBoardList.setOnClickListener(this);

        //將目前頁面的按鈕設成已選取的樣式

        btnHotText.setBackgroundColor(Color.LTGRAY);

        btnHotText.setTextColor(Color.BLACK);

對畫紅線的this，點Alt+Enter，選「Make 'MainActivity' implement 'android.view.View.OnClickListener'」

在類別 MainActivity 加上 implements View.OnClickListener

接著新增成員函式 onClick，點OK

修改新增的成員函式 onClick 為

    @Override

    public void onClick(View v) {

        switch(v.getId()){

        case R.id.button_HotText:

            loadData(); //重整熱門文章列表

            break;

        case R.id.button_BoardList:

            //之後要加上連到熱門看板頁的程式

            break;

        }

    }

利用 v.getId() 來分辨是點了哪一個按鈕
如果是點「熱門文章」的話，就重整一下列表
如果是點「熱門看板」的話，就跳至熱門看板頁

新增熱門看板頁

新增一個 layout 檔 activity_boardlist.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:background="#000">

    <include layout="@layout/horizontal_menu" />

</LinearLayout>

新增一個 java 檔 BoardListActivity.java

修改內容，將 public class BoardListActivity { } 改為

public class BoardListActivity extends AppCompatActivity implements View.OnClickListener {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_boardlist);

        Button btnHotText = (Button) findViewById(R.id.button_HotText);

        btnHotText.setOnClickListener(this);

        Button btnBoardList = (Button) findViewById(R.id.button_BoardList);

        btnBoardList.setOnClickListener(this);

        btnBoardList.setBackgroundColor(Color.LTGRAY);

        btnBoardList.setTextColor(Color.BLACK);

    }

    @Override

    public void onClick(View v) {

        switch(v.getId()){

            case R.id.button_HotText: //回到熱門文章頁

                Intent mainIntent = new Intent(this, MainActivity.class);

                mainIntent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);

                startActivity(mainIntent);

                overridePendingTransition(0,0);

                return;

            case R.id.button_BoardList:

                //之後要加上重整資料的程式

                return;

        }

    }

}

使用 mainIntent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
可避免兩頁互相切換時重覆的加入瀏覽歷程

使用 overridePendingTransition(0,0); 關閉換頁動畫

修改 AndroidManifest.xml
在 <application 裡加上

        <activity

            android:name=".BoardListActivity"

            android:launchMode="singleTop">

        </activity>

修改 MainActivity.java
在成員函式 onClick 裡，補上點擊「熱門看板」按鈕後，連到熱門看板頁的程式

                //連到熱門看板頁的程式

                Intent boardListIntent = new Intent(this, BoardListActivity.class);

                boardListIntent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);

                startActivity(boardListIntent);

                overridePendingTransition(0, 0);

執行看看

在熱門文章頁點擊「熱門看板」，跳至熱門看板頁
在熱門看板頁點擊「熱門文章」，跳至熱門文章頁

--
※ 作者: Knuckles 時間: 2015-12-28 22:16:53
※ 編輯: Knuckles 時間: 2016-01-26 13:50:52

※ 看板: KnucklesNote　文章推薦值: 0 目前人氣: 0 累積人氣: 1659　
※ 本文也出現在看板: ott

分享網址: 複製

DispBBS

※

ott 轉錄至看板 ott (使用連結) 時間：2015-12-31 04:04:41

1樓時間: 2015-12-31 11:49:18 (台灣)

→

Mousn

　 12-31 11:49 TW

助益頗豐，感謝

回到看板(←)《KnucklesNote》

r)回覆 e)編輯 d)刪除 M)收藏 ^x)轉錄同主題: =)首篇 [)上篇 ])下篇

回列表(←) 分享