Android開發之縱向跑馬燈效果實現

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

我們看淘寶、京東等app軟體，首頁就會看到那廣告詞向上走。。。今天我給大家帶來兩種實現方式。效果圖就不上啦，直接上程式碼：
一，自定義view
1，之前經常用findViewById(),今天用另一種方式來找控制元件。在app/build.gradle的閉包中新增如下程式碼：

compile 'com.jakewharton:butterknife:7.0.1'

2，專案中會用到的佈局檔案：
1）activity_main.xml

<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"
    tools:context="com.gyq.marquee_vertical.MainActivity">

    <com.gyq.marquee_vertical.view.LampView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/c12" 

        android:minHeight="40dp" />
</RelativeLayout>

2）item_lamp_layout.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 
="wrap_content" >

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:ellipsize="end"
        android:gravity="center"
        android:singleLine="true"
        android:textColor="@color/c9"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/tv_info"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:singleLine="true"
        android:textColor="@color/c5"
        android:layout_toRightOf="@id/tv_title"
        android:layout_marginLeft="10dp"
        android:textSize="16sp" />

</RelativeLayout>

3）lamp_layout.xml

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:background="@drawable/ic_launcher"/>

    <com.gyq.marquee_vertical.bean.VerticalLampView
        android:id="@+id/lamp_view"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginLeft="10dp"
        android:layout_gravity="center_vertical"
        android:background="@color/c12"
        />
</LinearLayout>

2，邏輯程式碼
a，AutoScrollData介面

package com.gyq.marquee_vertical.bean;

/**
 * ${DESC}
 * author: gyq
 * create at 2017/1/13 11:25
 */
public interface AutoScrollData<T> {
    String getTextTitle(T data);
    String getTextInfo(T data);
}

b，BaseAutoScrollTextView繼承ListView。

package com.gyq.marquee_vertical.bean;

import android.content.Context;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.gyq.marquee_vertical.R;

import java.util.ArrayList;
import java.util.List;

/**
 * ${DESC}
 * author: gyq
 * create at 2017/1/13 11:30
 */
public abstract class BaseAutoScrollTextView<T> extends ListView implements AutoScrollData<T> {
    private List<T> mDataList = new ArrayList<>();
    private float mSize = 16;
    private int mMax ;
    private int position = -1;
    private int scroll_Y;
    private int mScrollY;
    private AutoScrollAdapter mAutoScrollAdapter = new AutoScrollAdapter();
    private Context mContext;
    private OnItemClickListener mOnItemClickListener;

    private long mTimer = 1000;

    private Handler handler = new Handler();
    Runnable runnable = new Runnable() {
        @Override
        public void run() {
            // 開啟輪播
            switchItem();
            handler.postDelayed(this, mTimer);
        }
    };

    public interface OnItemClickListener {
         void onItemClick(int position);
    }

    private void switchItem() {
        if (position == -1) {
            scroll_Y = 0;
        }else {
            scroll_Y = mScrollY;
        }

        smoothScrollBy(scroll_Y,2000);
        setSelection(position);
        position++;
    }


    public BaseAutoScrollTextView(Context context) {
        this(context,null);
    }

    public BaseAutoScrollTextView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public BaseAutoScrollTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.mContext = context;
        mScrollY = dp2px(getAdertisementHeight());
        init();
    }

    private void init(){
        this.setDivider(null);
        this.setDividerHeight(0);
        this.setFastScrollEnabled(false);
        this.setEnabled(false);
    }

    private int dp2px(int dipValue) {
        final float scale = mContext.getResources().getDisplayMetrics().density;
        return (int) (dipValue * scale + 0.5f);
    }

    protected abstract int getAdertisementHeight();

    private class AutoScrollAdapter extends BaseAdapter {

        @Override
        public int getCount() {
            final int count = mDataList == null ? 0 : mDataList.size();
            return count > 1 ? Integer.MAX_VALUE : count;
        }

        @Override
        public Object getItem(int position) {
            return mDataList.get(position % mMax);
        }

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

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder viewHolder;
            if (null == convertView) {
                viewHolder = new ViewHolder();
                convertView = LayoutInflater.from(mContext).inflate(R.layout.item_lamp_layout,null);

                viewHolder.mTitleView = (TextView)convertView.findViewById(R.id.tv_title);
                viewHolder.mInfoView = (TextView)convertView.findViewById(R.id.tv_info);
                convertView.setTag(viewHolder);
            }else {
                viewHolder = (ViewHolder)convertView.getTag();
            }

            T data = mDataList.get(position % mMax);
            initItemData(position,convertView,viewHolder,data);
            return convertView;
        }
    }

    private void initItemData(final int positions, View convertView, ViewHolder viewHolder, T data) {
        viewHolder.mTitleView.setLayoutParams(new RelativeLayout.LayoutParams(
                RelativeLayout.LayoutParams.WRAP_CONTENT,
                dp2px(getAdertisementHeight())));
        viewHolder.mTitleView.setTextSize(mSize);
        viewHolder.mTitleView.setText(getTextTitle(data));

        viewHolder.mInfoView.setTextSize(mSize);
        viewHolder.mInfoView.setText(getTextInfo(data));

        convertView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
               // mOnItemClickListener.onItemClick(positions % mMax);
            }
        });
    }

    static class ViewHolder {
        TextView mTitleView;// 標題
        TextView mInfoView;// 內容
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return false;
    }

    public void setData(List<T> datas) {
        mDataList.clear();
        mDataList.addAll(datas);
        mMax = mDataList == null ? 0 : mDataList.size();
        this.setAdapter(mAutoScrollAdapter);
        mAutoScrollAdapter.notifyDataSetChanged();
    }

    public void setTextSize(float _size) {
        this.mSize = _size;
    }

    public void setOnItemClickListener(OnItemClickListener listener) {
        this.mOnItemClickListener = listener;
    }

    public void setTimer(long time) {
        this.mTimer = time;
    }

    public void start() {
        handler.postDelayed(runnable,1000);
    }

    public void stop() {
        handler.removeCallbacks(runnable);
    }
}

c.LampBean類

import java.io.Serializable;

/**
 * ${DESC}
 * author: gyq
 * create at 2017/1/13 13:53
 */
public class LampBean implements Serializable {
    public String title;
    public String info;
}

d，

import android.content.Context;
import android.util.AttributeSet;

/**
 * ${DESC}
 * author: gyq
 * create at 2017/1/13 13:54
 */
public class VerticalLampView extends BaseAutoScrollTextView<LampBean> {

    public VerticalLampView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public VerticalLampView(Context context) {
        super(context);
    }

    public VerticalLampView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    /**
     * 這裡面的高度應該和你的xml裡設定的高度一致
     * @return
     */
    @Override
    protected int getAdertisementHeight() {
        return 40;
    }

    @Override
    public String getTextTitle(LampBean data) {
        return data.title;
    }

    @Override
    public String getTextInfo(LampBean data) {
        return data.info;
    }
}

e，LampView 在這個類中，用到了第一步提到的：
第一步：

@Bind(R.id.lamp_view)
VerticalLampView lampView;

第二步：

inflate(getContext(), R.layout.lamp_layout, this);
ButterKnife.bind(this,this);

import android.content.Context;
import android.util.AttributeSet;
import android.widget.FrameLayout;

import com.gyq.marquee_vertical.R;
import com.gyq.marquee_vertical.bean.LampBean;
import com.gyq.marquee_vertical.bean.VerticalLampView;

import java.util.ArrayList;
import java.util.List;

import butterknife.Bind;
import butterknife.ButterKnife;

/**
 * ${DESC}
 * author: gyq
 * create at 2017/1/13 13:59
 */
public class LampView extends FrameLayout {
    @Bind(R.id.lamp_view)
    VerticalLampView lampView;
    private Context mContext;
    private List<LampBean> list = new ArrayList<>();
    public LampView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.mContext = context;
        init();
    }

    private void init() {
        setView();
    }

    private void setView() {
        inflate(getContext(), R.layout.lamp_layout, this);
        ButterKnife.bind(this,this);
        initData();
        initView();
    }

    private void initView() {
        lampView.setData((ArrayList<LampBean>) list);
        lampView.setTextSize(15);
        lampView.setTimer(2000);
        lampView.start();
    }

    private void initData() {
        LampBean bean = new LampBean();
        bean.title = "爆款";
        bean.info = "踏青零食上京東，百萬零食1元秒";
        list.add(bean);

        bean = new LampBean();
        bean.title = "公告";
        bean.info = "看老劉中國行，滿129減50！";
        list.add(bean);

        bean = new LampBean();
        bean.title = "活動";
        bean.info = "高姿CC霜全渠道新品首發，領券199減50，點選檢視";
        list.add(bean);
    }
}

二、ViewFlipper
1，新建res/anim資料夾，然後看程式碼：
a.push_up_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromYDelta="100%p"
        android:toYDelta="0"/>
    <alpha
        android:duration="300"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"/>
</set>

b.push_up_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromYDelta="0"
        android:toYDelta="-100%p"/>
    <alpha
        android:duration="300"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"/>
</set>

2，activity_main.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"
    tools:context="com.gyq.marquee_vertical.MainActivity">

    <ViewFlipper
        android:id="@+id/view_flipper"
        android:layout_centerInParent="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:flipInterval="2000"/>
</RelativeLayout>

3，layout_item.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:orientation="vertical">

    <TextView
        android:id="@+id/tv_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

4，MainActivity.java

package com.gyq.marquee_vertical;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.ViewFlipper;

public class MainActivity extends AppCompatActivity {

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

        ViewFlipper flipper = (ViewFlipper)findViewById(R.id.view_flipper);

        for (int i = 0; i < 5;i++) {
            final int y = i;
            View view = getLayoutInflater().inflate(R.layout.layout_item,null,false);

            //設定點選事件
            view.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(MainActivity.this, "快樂" + y, Toast.LENGTH_SHORT).show();
                }
            });

            TextView tv = (TextView) view.findViewById(R.id.tv_content);
            tv.setText("我很快樂" + i);
            flipper.addView(view);

        }

        flipper.setInAnimation(AnimationUtils.loadAnimation(this,R.anim.push_up_in));
        flipper.setOutAnimation(AnimationUtils.loadAnimation(this,R.anim.push_up_out));
        flipper.startFlipping();
    }
}

小結：縱向跑馬燈效果也是一種比較常見的，如果以後專案中用的著，拿去！不謝。

Android開發之縱向跑馬燈效果實現

我們看淘寶、京東等app軟體，首頁就會看到那廣告詞向上走。。。今天我給大家帶來兩種實現方式。效果圖就不上啦，直接上程式碼：一，自定義view 1，之前經常用findViewById(),今天用另一種方式來找控制元件。在app/build.gradle的閉包

Android 開發筆記_textvieww跑馬燈效果

support ota 效果 utf bundle per ack top ddl 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://sche

android開發之&使用ViewPager加gridView實現選單按鈕分頁滑動（類似QQ表情選擇翻頁效果）

剛做的專案中要用到選單分頁，以前沒做過，仔細想了想，既然是分頁，肯定就少不了ViewPager，大家都知道gridView可以實現九宮格，剛好滿足我們的需求，我做的是gridview單行顯示，大家如果需要向QQ表情一樣多行顯示，直接修改資料來源就可以。好了，上程式碼 pu

Android 自定義View之TextView跑馬燈效果

public class MarqueeView extends SurfaceView implements SurfaceHolder.Callback{ public Context mContext; private float mTextSize = 100; //字型大小

Android 跑馬燈效果實現的兩種方式，解決和viewpager的衝突問題

第一篇部落格寫一點簡單的東西，多麼的簡單，就是一個跑馬燈，簡單的要死。所以話不多，寫起來。首先我們來講一個段子先緩和一下氣氛。大學的時候，隔壁宿舍老喜歡蹭我的wifi，煩死了，然後我把wifi名改成了：206有個帥哥是誰。密碼是我的名字，媽的看誰還蹭，結果。除了

VUE之文字跑馬燈效果

文字 utf button doctype put inpu stop title set <!DOCTYPE html> Title <input type="button" value="浪起來"

JS 跑馬燈效果實現（很好用）

實現跑馬燈效果的JS很多，但是很多不好用，下面介紹一個比較好用的。好用之處在於： 1 支援一個頁面多個跑馬燈效果 2.支援跑馬燈內容的非同步載入關鍵的實現程式碼，如果看不懂，可以跑這個列子 <body><ul id="RunTopic"><

Android應用中TextView跑馬燈效果

往往有很多時候我們所使用的TextView能顯示的內容字數是有限的，有時當我們要設定的內容長度過長時，我們的UI頁面就會出現一些不和諧的現象。處理方法(很少有人把...放在前面的吧…^ v ^)： 1，尾部(...)處理 android:ellipsize=

JS 跑馬燈效果實現

html部分 <div class="box8"> <div class="t_news"> <ul class="news_li"> <li><a

android學習：TextView 跑馬燈的實現

最近無意間看到了涉及到跑馬燈效果的程式碼，於是在網上查閱了很多資料，在這裡對自己看的一些文章進行一下總結，順便加上自己的一些體會。讓我們一步步逐漸向下。首先我們要實現走馬燈這樣一個效果，通常來說都是在TextView這個控制元件中來實現的，而且其中的文

Android開發之通過藍芽耳機實現訊飛語音識別的功能

近階段在開發一款app，實現通過藍芽耳機進行訊飛語音識別，獲取識別結果之後再通過語音合成從藍芽耳機播報出識別結果。上網也查了很多資料，大多是說通過一下兩行程式碼： mAudioManager.setBluetoothScoOn(true);

JS跑馬燈效果實現（很好用）

原文地址：http://blog.csdn.net/yangsen251024/article/details/8614305 實現跑馬燈效果的JS很多，但是很多不好用，下面介紹一個比較好用的。好用之處在於： 1 支援一個頁面多個跑馬燈效果 2.支援跑馬燈內容的非同步載

android開發之掃描二維碼實現網頁登入

匯入BarCodeLibrary到Eclipse當中在Eclipse當中建立新專案並依賴於BarCodeLibrary類庫 Code: MainActivity.java public class MainActivity extends Activity implements OnClickLis

Android開發之檔案記事本設計與實現

(一)實驗型別：設計性(二)實驗目的：1．掌握檔案讀寫的方法。2．熟悉XML檔案的佈局設定，掌握利用DDMS檢視AVD檔案目錄的方法。(三)實驗內容與要求： 1.自己設定頁面佈局，當在頁面輸入“檔名”和“內容”後，單擊“儲存”按鈕可以實現將內容儲存到檔名所在的檔案中。2.通過

Android開發之RecyclerView的互動動畫(實現拖拽和刪除)

做RecyclerView做相關的動畫效果的時候，用的最多的是v7包下的ItemTouchHelper類，這個類很強大，如有興趣的童鞋可以自行翻看原始碼，接下來我帶領大家實現RecyclerView相關的互動動畫。大家看下面的效果(拖拽和刪除)： ------------

Android 實現跑馬燈效果

這裡用到了HorizontalScrollView巢狀TextView，上xml佈局: <HorizontalScrollView android:id="@+id/horiSv" android:layout_width="match_parent"

Android實現textview文字滾動顯示（跑馬燈效果）

自定義Textview並對其進行改造,主要目的是讓textview獲取焦點，這樣文字才能滾動起來 public class MyTextView extends android.support.v7

Android TextView 實現跑馬燈效果

自定義一個TextView控制元件 public class MarqueeTextView extends AppCompatTextView { public MarqueeTextView(Context context) { s

Android Studio中TextView實現跑馬燈效果

自建一個MarqueeText 類繼承自AppCompatTextView並重載父類的三個構造方法，新增一個isFocused方法 public class MarqueeText extends AppCompatTextView { public Marque

Android 上下滾動（跑馬燈）效果實現

產品的有個需求是文字上下滾動，第一想到的是用屬性動畫實現，2個TextView 切換滾動，網上看了一堆資料大部分都是 TextSwitch，寫部落格不貼效果圖真的是很惆悵，不知道具體效果如何，第一次進入切換是否有問題，還有就是最後一個切換到第二個是否有問題，動畫是否流暢等，

Android開發之縱向跑馬燈效果實現

相關推薦