ListView條目點選時和點選後圖片顏色、文字顏色、條目背景更改大全

阿新 • • 發佈：2019-01-16

當ListView條目點選時，往往需要改變條目裡面控制元件的顏色，如改變文字顏色、條目的背景顏色或是圖片顏色。

而這些顏色的改變又分三大類為：

1.點選時顏色改變，點選後顏色還原

2.點選時顏色不變，點選後顏色改變，點選別的條目時顏色還原

3.點選時顏色改變，點選後顏色保持不變，點選別的條目時顏色還原

而在網上查詢的都是零零散散，而且不很詳細。於是，現在就總結一下，和大家分享。

首先把框架搭好，因為像這樣的顏色改變，ListView放在側邊選單欄的比較多。而在完整頁面中展示資料資訊的ListView通常是點選後，將TextView文字顏色改為灰色，標記為已讀。而這種實現與Json資料

和資料儲存相關，簡單的說就是把條目上對應的Json欄位的id儲存下來，在getView()方法裡更改TextView的顏色，實現區域性重新整理。所以此方法在這裡不實現，以後總結

方便起見，還是按照上一篇部落格的知乎框架為案例：

9.在ManiActivity中編寫程式碼，展示ListView

（為了顯示重點，前面的八步放在了最後面）

package com.example.acer.zhihu;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import 
 android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import 
 android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private Toolbar mToolbar;
    private DrawerLayout mDrawerLayout;

    private int[] imagesId = {R.drawable.rb_home, R.drawable.rb_find, R.drawable.rb_focus,
            R.drawable.rb_collection, R.drawable.rb_draft, R.drawable.rb_question};
    private String[] titles = {"首頁", "發現", "關注", "收藏", "草稿", "提問"};
    private ListView mLv_titles;

    private MyAdapter mMyAdapter;

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

        // 初始化控制元件
        initView();

        // 初始化資料
        initData();

    }

    // 初始化物件
    private void initView() {
        // 初始化Toolbar、DrawerLayout，生成相應的物件
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);

        // 初始化ListView
        mLv_titles = (ListView) findViewById(R.id.lv_title);
        mMyAdapter = new MyAdapter();
        mLv_titles.setAdapter(mMyAdapter);



    }

    // 設定應用title
    private void initData() {
        // 設定Toolbar標題，需在setSupportActionBar之前，不然會失效
        mToolbar.setTitle("首頁");
        mToolbar.setTitleTextColor(Color.TRANSPARENT);

        // 設定toolbar支援actionbar
        setSupportActionBar(mToolbar);

        // 實現按鈕開關的顯示及開啟關閉功能並同步動畫
        initDrawerToggle();
    }

    private void initDrawerToggle() {
        // 引數：開啟抽屜的activity、DrawerLayout的物件、toolbar按鈕開啟關閉的物件、描述open drawer、描述close drawer
        ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close);
        // 新增抽屜按鈕，通過點選按鈕實現開啟和關閉功能; 如果不想要抽屜按鈕，只允許在側邊邊界拉出側邊欄，可以不寫此行程式碼
        drawerToggle.syncState();
        // 設定按鈕的動畫效果; 如果不想要開啟關閉抽屜時的箭頭動畫效果，可以不寫此行程式碼
        mDrawerLayout.setDrawerListener(drawerToggle);
    }

    class MyAdapter extends BaseAdapter {

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

        @Override
        public Object getItem(int position) {
            return titles[position];
        }

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

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View view = View.inflate(getApplicationContext(), R.layout.left_list, null);
            ImageView iv_photo = (ImageView) view.findViewById(R.id.iv_photo);
            TextView tv_title = (TextView) view.findViewById(R.id.tv_title);

            iv_photo.setBackgroundResource(imagesId[position]);
            tv_title.setText(titles[position]);

            return view;
        }
    }

}

效果圖：
這裡寫圖片描述

現在開始更改顏色：

更改文字顏色1：點選時成白色，點選後還原成黑色（通過顏色選擇器實現）

在res目錄下建立color目錄，再建立text_color_select.xml檔案

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#fff" android:state_pressed="true"/>
    <item android:color="#000"/>
</selector>

在left_list.xml檔案中將：

android:textColor="#000"改為android:textColor="@color/text_color_select"

效果動態圖：

更改文字顏色2：點選時顏色不變，點選後顏色改變，點選別的條目時顏色還原（狀態選擇器+條目點選事件+更新位置）

在text_color_select.xml檔案中將pressed改為enable

在MainActivity中新增程式碼：

    // 預設當前被選中的item的位置為0
    private int mCurrentPos = 0;
    ...
    // 初始化物件
    private void initView() {
        // 初始化Toolbar、DrawerLayout，生成相應的物件
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);

        // 初始化ListView
        mLv_titles = (ListView) findViewById(R.id.lv_title);
        mMyAdapter = new MyAdapter();
        mLv_titles.setAdapter(mMyAdapter);

        mLv_titles.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                // 更新當前被選中的位置
                mCurrentPos = position;
                // 重新整理listview
                mMyAdapter.notifyDataSetChanged();

            }
        });
    }
    ...
    @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View view = View.inflate(getApplicationContext(), R.layout.left_list, null);
            ImageView iv_photo = (ImageView) view.findViewById(R.id.iv_photo);
            TextView tv_title = (TextView) view.findViewById(R.id.tv_title);

            iv_photo.setBackgroundResource(imagesId[position]);
            tv_title.setText(titles[position]);

            // 只有當更新的位置等於當前位置時，更改顏色
            if(mCurrentPos == position){
                tv_title.setEnabled(true);
            } else {
                tv_title.setEnabled(false);
            }

            return view;
        }

動態效果圖：

更改文字顏色3：點選時顏色改變，點選後顏色保持不變，點選別的條目時顏色還原（上訴的兩個結合）

只需要在text_color_select.xml檔案中新增一行原被修改的程式碼：
<item android:color="#fff" android:state_pressed="true"/>

效果圖:

更改條目顏色1：點選時成淺藍色，點選後還原成無色（listSelector+點選重新整理）

（為了避免造成干擾，將之前改變TextView顏色的程式碼全部清除）

在custom_drawer.xml檔案的ListView控制元件中插入：

設定listSelector顏色--android:listSelector="#1C86EE"

在MainActivity中設定條目點選事件，重新整理ListView即可

mLv_titles.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                mMyAdapter.notifyDataSetChanged();

            }
        });

此方法4.4版本有效執行，5.0版本效果是更改條目顏色3的效果

更改條目顏色2：點選時顏色不變，點選後顏色改變，點選別的條目時顏色還原（）

在left_list.xml檔案中，給最外層RelativeLayout新增id

android:id="@+id/rl_list_background"

在MainActivity中新增程式碼，和更改文字顏色2非常相似

        mLv_titles.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                // 更新當前被選中的位置
                mCurrentPos = position;
                // 重新整理listview
                mMyAdapter.notifyDataSetChanged();

            }
        });

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View view = View.inflate(getApplicationContext(), R.layout.left_list, null);
            ImageView iv_photo = (ImageView) view.findViewById(R.id.iv_photo);
            TextView tv_title = (TextView) view.findViewById(R.id.tv_title);
            mRl_list_background = (RelativeLayout) view.findViewById(R.id.rl_list_background);
            iv_photo.setBackgroundResource(imagesId[position]);
            tv_title.setText(titles[position]);

            // 只有當更新的位置等於當前位置時，更改顏色
            if(mCurrentPos == position){
                rl_list_background.setBackgroundColor(Color.rgb(35, 154, 237));
            } else {
                mRl_list_background.setBackgroundColor(Color.TRANSPARENT);
            }

            return view;
        }
...

效果圖：

更改條目顏色3：點選時顏色改變，點選後顏色保持不變，點選別的條目時顏色還原（listSelector）

只需一行程式碼，就是這麼簡單--android:listSelector="#1C86EE"

效果圖：

更改ImageView圖片顏色：點選時不變，點選後改變，切換時還原

// 新增圖片陣列
private int[] imagesEnableId =
            {R.drawable.rb_home_enable, R.drawable.rb_find_enable, R.drawable.rb_focus_enable,
                    R.drawable.rb_collection_enable, R.drawable.rb_draft_enable, R.drawable.rb_question_enable};
...
private void initView() {
        // 初始化Toolbar、DrawerLayout，生成相應的物件
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);

        // 初始化ListView
        mLv_titles = (ListView) findViewById(R.id.lv_title);

        mMyAdapter = new MyAdapter();
        mLv_titles.setAdapter(mMyAdapter);

        mLv_titles.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                // 更新當前被選中的位置
                mCurrentPos = position;
                // 重新整理listview
                mMyAdapter.notifyDataSetChanged();

            }
        });

    }
    ...
    @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View view = View.inflate(getApplicationContext(), R.layout.left_list, null);
            ImageView iv_photo = (ImageView) view.findViewById(R.id.iv_photo);
            TextView tv_title = (TextView) view.findViewById(R.id.tv_title);
            mRl_list_background = (RelativeLayout) view.findViewById(R.id.rl_list_background);
            System.out.println("------條目點選後");
            iv_photo.setBackgroundResource(imagesId[position]);
            tv_title.setText(titles[position]);
            // 只有當更新的位置等於當前位置時，更改顏色
            if(mCurrentPos == position){
                mRl_list_background.setBackgroundColor(Color.rgb(35, 154, 237));
                iv_photo.setBackgroundResource(imagesEnableId[position]);
            } else {
                mRl_list_background.setBackgroundColor(Color.TRANSPARENT);
                iv_photo.setBackgroundResource(imagesId[position]);
            }

            return view;
        }

效果圖：

1.建立專案，檢查是否有v7包

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:24.2.1'
}

2.修改styles的theme樣式

<resources>

    <resources>

        <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">

            <!-- Customize your theme here. -->
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>

            <!--返回鍵樣式-->
            <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>

            <item name="windowActionBar">false</item>
            <item name="android:windowNoTitle">true</item>
            <!-- 使用 API Level 22編譯的話，要拿掉字首字 -->
            <item name="windowNoTitle">true</item>
        </style>

        <!-- Base application theme. -->
        <style name="AppTheme" parent="AppTheme.Base"></style>

        <style name="AppTheme.DrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle">
            <item name="color">@android:color/white</item>
        </style>

    </resources>

</resources>

3.給strings.xml檔案新增值

<resources>
    <string name="app_name">ZhiHu</string>
    <string name="open">open</string>
    <string name="close">close</string>
</resources>

4.建立ToolBar標題欄的佈局檔案：tool_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/toolbar"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:background="?attr/colorPrimary"
     android:minHeight="?attr/actionBarSize">

</android.support.v7.widget.Toolbar>

前四步一模一樣，在這裡粘貼出來是為了讓大家方便看程式碼，如有不解，請參考上一篇博文

5.建立DrawerLayout側滑面板的佈局：custom_drawer.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/drawerLayout"
     android:layout_width="match_parent"
     android:layout_height="match_parent">

    <!--主佈局，ToolBar下面的佈局-->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="首頁"
            android:textSize="30dp"
            android:textColor="@android:color/darker_gray"
            android:layout_centerInParent="true"/>
    </RelativeLayout>

    <!--側滑選單，左邊隱藏的佈局-->
    <RelativeLayout
        android:id="@+id/rl_left_content"
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:background="#F5F5F5"
        android:orientation="vertical"
        android:layout_gravity="start">

        <RelativeLayout
            android:id="@+id/rl_photo"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="12dp">

            <ImageButton
                android:id="@+id/ib_photo"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:background="@drawable/ic_launcher"
                android:scaleType="center"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/ib_photo"
                android:layout_marginLeft="10dp"
                android:layout_centerVertical="true"
                android:text="暱稱"
                android:textColor="#000"
                android:textSize="20sp"/>
        </RelativeLayout>

        <!--點選條目時顯示的顏色android:listSelector="#1C86EE"-->
        <ListView
            android:id="@+id/lv_title"
            android:layout_below="@id/rl_photo"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:divider="@null"/>

        <!--畫一條橫線分隔開-->
        <View
            android:layout_above="@+id/rl_setting"
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:background="#888"/>

        <RelativeLayout
            android:id="@+id/rl_setting"
            android:layout_above="@+id/rl_theme"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="15dp">

            <TextView
                android:text="設定"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:textColor="#8000"
                android:textSize="15sp"/>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/rl_theme"
            android:layout_alignParentBottom="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="15dp">

            <TextView
                android:text="切換主題"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:textColor="#8000"
                android:textSize="15sp"/>
        </RelativeLayout>

    </RelativeLayout>

</android.support.v4.widget.DrawerLayout>

6.在activity.xml檔案中插入ToolBar佈局、DrawerLayout佈局

<?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"
              tools:context=".MainActivity">
    <!--Toolbar-->
    <include layout="@layout/tool_bar" />
    <!--DrawerLayout-->
    <include layout="@layout/custom_drawer" />
</LinearLayout>

7.修改colors.xml標題欄顏色

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#1C86EE</color>
    <color name="colorPrimaryDark">#000000</color>
    <color name="colorAccent">#FF4081</color>
</resources>

8.給ListView建立left_list.xml佈局

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

    <ImageView
        android:id="@+id/iv_photo"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:scaleType="center"/>
    <TextView
        android:text="首頁"
        android:id="@+id/tv_title"
        android:layout_toRightOf="@id/iv_photo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_centerVertical="true"
        android:textColor="#000"
        android:textSize="18sp"/>

</RelativeLayout>

ListView條目點選時和點選後圖片顏色、文字顏色、條目背景更改大全

當ListView條目點選時，往往需要改變條目裡面控制元件的顏色，如改變文字顏色、條目的背景顏色或是圖片顏色。而這些顏色的改變又分三大類為： 1.點選時顏色改變，點選後顏色還原 2.點選時顏色不變，點選後顏色改變，點選別的條目時顏色還原 3.點選時顏色

ListView的長按事件和點選事件衝突的解決辦法

需求是這樣的：listView中點選item 跳轉到一個activity，長按item可以對這條item進行刪除操作，在刪除前會彈出dialog（確認刪除對話方塊）。但是在開發過程中

【Swift 2.1】為 UIView 新增點選事件和點選效果

前言　　UIView 不像 UIButton 加了點選事件就會有點選效果，體驗要差不少，這裡分別通過自定義和擴充套件來實現類似 UIButton 的效果。宣告　　歡迎轉載，但請保留文章原始出處:) 　　部落格園：http://www.cnblogs.com　　農民伯伯： http://ove

c# listview 設定多選MultiSelect和行選FullRowSelect以及選項框CheckBoxes後多選預設選中問題

類似問題在這: https://stackoverflow.com/questions/2017170 listView有一個bug,啟用選擇框後,在開啟多選後按住shift進行多行選擇時會自動選中選擇框找了中文網站各種地方似乎並沒有人解決這個事後來在stack

Android Radiobutton超級好用的自定義背景、文字顏色、點選效果

Android開發中一些認證、篩選的功能需要用到單選按鈕，首先想到的是RadioGroup巢狀RadioButton，但是自帶的樣式真是不堪入目啊，功能實現了，如何能最大化的提升使用者體驗呢？這是一個問題……廢話不多說，畢竟開發人員也不太善於表達，還是直接看圖說話吧：首先思路

jsp+servlet對於單選按鈕和復選框取值並且存放到數據庫中

cat finall str connect put exce char exc @override index.jsp <form action="index.gj?method=toradio" method="post"> <div align=

DataGridView點擊空白處和失去焦點後取消選擇和關閉默認選擇第一行C#Winform

tag info mouse ret first 用戶 blog .cn pre 默認選擇第一行,可以通過窗體的Load事件中調用Datagridview的ClearSelection來取消選擇也可以設置 Datagridview的CurrentCell = null;

微信小程序-修改單選框和復選框大小的方法

整體復選框 col 限制微信 for 明顯單選框模糊方法有兩種：一：采用css的zoom屬性 zoom縮放會將元素保持在左上角，並且會有毛邊，可能會稍稍改變元素原來的形狀。二：采用css3的transform:scale屬性 zoom縮放會將元素保持在中間

單選框和復選框中value值得獲取

二維輸出 clas catch 個數 his code ray line 在開發過程中，為了提高代碼維護性，一般使用foreach語句來輸出復選框或者單選框中的值。例如我的這段代碼： 1 <?php 2 foreach ($Array_yanpan_r

jQuery獲取Select選擇的Text(文字資訊)和 Value屬性的值，select語法解釋;單選框和複選框

地址：http://www.cnblogs.com/yaoshiyou/archive/2010/08/24/1806939.html jQuery獲取Select選擇的Text和Value: 語法解釋： 1. $("#select_id").change(function(){

jQuery的CheckBox全選反選時，勾選失效的問題

利用removeAttr()和prop()方法，完全沒問題。在做複選框的時候，全選、反選應該是比較常用的功能。我在做這個功能時，發現多次全選、反選之後，頁面展示的“勾選”效果失敗了，頁面上沒有展示出勾選效果。但是追蹤js，發現已經是選中狀態

jqGrid表格單選框和多選框

行單選，在載入列表的js下新增以下屬性和方法 beforeSelectRow: true, beforeSelectRow:function(){ $("#inventory

自定義單選框和多選框

說明:作為一個Java後端程式設計師，有時候也需要自己去寫些前端程式碼，所以將工作中用到的一些小知識做記錄分享。 1.自定義單選框（有圖片） * ①先看效果圖： * ②再獻上完整程式碼： <!DOCTYPE html> <html> &l

select單選框和多選框設定預設值

在使用select單選框的時候，有時候需要配合後臺傳遞的資料設定預設值。這時候需要js來設定select單選框的預設值。比如我們定義瞭如下的單選框 <select name="locus" id="selected" class="form-control">

【2018.05.14】python3.6+selenium 單選框和複選框

下面是一個單選框和複選框的HTML檔案 <html> <head> <title>"X box 單選"</title> </head> <body> &l

Java 100-006：選單欄的建立-包括巢狀選單，禁用選單項，複選框和單選按鈕選單項，彈出選單以及快捷鍵和加速器

package java01; import java.awt.*; import java.awt.event.*; import javax.swing.*; /** * 我的java每天100行程式碼006 * 選單欄的建立：包括巢狀選單，禁用選單項，複選框和單選按鈕選

AngularJS中單選按鈕和多選框的動態繫結

AngularJS中的單選按鈕的動態繫結十分簡單，寫法如下： <input type="radio" name="sex" value="man" ng-model="sex">男 <input type="radio" name="se

小知識點：複選框和單選按鈕水平排列

執行效果如下或檢視右側結果視窗：實現原始碼請檢視bootstrap.css檔案第1767行～第1780行： .radio-inline, .checkbox-inline { display: inline-block; padding-left: 20px; ma

MFC介面程式設計基礎（12）：組框、單選按鈕和複選框

上一篇：MFC介面程式設計基礎（11）：靜態文字框、命令按鈕和編輯框下一篇：MFC介面程式設計基礎（13）：列表框和組合框組框、單選按鈕和複選框都是對話方塊的常見控制元件。組框與靜態文字框一樣是CStatic類

【基於Python的Selenium2自動化測試】07 - 定位單選框和複選框

文章目錄 7.1 認識一下單選框和複選框 7.2 勾選單選框 7.3 勾選複選框 7.3.1 勾選單個複選框 7.3.2 勾選全部複選框 7.4 判斷選中與否的狀態

ListView條目點選時和點選後圖片顏色、文字顏色、條目背景更改大全

相關推薦