Android 高级UI设计笔记05：使用TextView实现跑马灯的效果

Android 高级UI设计笔记05：使用TextView实现跑马灯的效果

1. 使用TextView属性实现跑马灯的效果：

（1）. 新建一个Android工程，命名为"MarqueeTextViewDemo"，如下：

（2）. 来到l如下：

 1 <RelativeLayout xmlns:android=""
 2     xmlns:tools=""
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:paddingBottom="@dimen/activity_vertical_margin"
 6     android:paddingLeft="@dimen/activity_horizontal_margin"
 7     android:paddingRight="@dimen/activity_horizontal_margin"
 8     android:paddingTop="@dimen/activity_vertical_margin"
 9     tools:context="com.himi.marqueetextviewdemo.MainActivity" >
10 
11     <TextView
12         android:id="@+id/textview1"
13         android:layout_width="wrap_content"
14         android:layout_height="wrap_content"
15         android:ellipsize="marquee"
16         android:focusable="true"
17         android:focusableInTouchMode="true"
18         android:singleLine="true"
19         android:text="@string/hello_world" />
20 
21 </RelativeLayout>

（3）. 来到MainActivity.java，如下：

 1 package com.himi.marqueetextviewdemo;
 2 
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 import android.view.Menu;
 6 import android.view.MenuItem;
 7 
 8 public class MainActivity extends Activity {
 9 
10     @Override
11     protected void onCreate(Bundle savedInstanceState) {
12         Create(savedInstanceState);
13         setContentView(R.layout.activity_main);
14     }
15 
16     
17 }

（4）. 布署程序到模拟器上，如下：

效果如下：

（5）. 总结：

  定义TextView标签的4个属性： 

1 android:singleLine="true"//使其只能单行
2 android:ellipsize="marquee"//是否滚动
3 android:focusable = "true"// 设置是否获得焦点
4 android:focusableInTouchMode = "true"//设置在Touch模式下View是否能取得焦点

设置上面属性之后，此时TextView显示文字就会自动循环显示。但是，对于一个大View中有很多子View来说，同一时刻只能有一个子View获得focus！也就是说当前这一屏上，最多只能有一个view能有跑马灯效果，而不能多个View同时都有跑马灯效果。

2. 自定义类MarqueeTextView继承自TextView实现跑马灯的效果：

（1）首先来到了l布局文件，如下：

 1 <RelativeLayout xmlns:android=""
 2     xmlns:tools=""
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:paddingBottom="@dimen/activity_vertical_margin"
 6     android:paddingLeft="@dimen/activity_horizontal_margin"
 7     android:paddingRight="@dimen/activity_horizontal_margin"
 8     android:paddingTop="@dimen/activity_vertical_margin"
 9     tools:context="com.himi.marqueetextviewdemo.MainActivity" >
10 
11     <com.himi.marqueetextviewdemo.MarqueeTextView
12         android:id="@+id/textview1"
13         android:layout_width="wrap_content"
14         android:layout_height="wrap_content"
15         android:ellipsize="marquee"
16         android:singleLine="true"
17         android:text="@string/hello_world" />
18     <com.himi.marqueetextviewdemo.MarqueeTextView
19         android:id="@+id/textview2"
20         android:layout_width="wrap_content"
21         android:layout_height="wrap_content"
22         android:ellipsize="marquee"
23         android:singleLine="true"
24         android:layout_marginTop="15dp"
25         android:text="@string/hello_world" />
26 
27 </RelativeLayout>

（2）来到了MarqueeTextView继承自TextView，如下：

 1 package com.himi.marqueetextviewdemo;
 2 
 3 t.Context;
 4 import android.util.AttributeSet;
 5 import android.widget.TextView;
 6 
 7 public class MarqueeTextView extends TextView {
 8 
 9     public MarqueeTextView(Context context, AttributeSet attrs, int defStyle) {
10         super(context, attrs, defStyle);
11         // TODO 自动生成的构造函数存根
12     }
13 
14     public MarqueeTextView(Context context, AttributeSet attrs) {
15         super(context, attrs);
16         // TODO 自动生成的构造函数存根
17     }
18 
19     public MarqueeTextView(Context context) {
20         super(context);
21         // TODO 自动生成的构造函数存根
22     }
23     
24     /**
25      * 复写isfocued方法，返回true（默认都是有焦点，平常只有一个有焦点在第一行上）
26      * 这样才能确保每一个MarqueeTextView都具备焦点
27      */
28     @Override
29     public boolean isFocused() {
30         // TODO 自动生成的方法存根
31         return true;
32     }
33 
34 }

（3）来到了MainActivity.java：如下

 1 package com.himi.marqueetextviewdemo;
 2 
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 import android.view.Menu;
 6 import android.view.MenuItem;
 7 
 8 public class MainActivity extends Activity {
 9 
10     @Override
11     protected void onCreate(Bundle savedInstanceState) {
12         Create(savedInstanceState);
13         setContentView(R.layout.activity_main);
14     }
15 
16     
17 }

（4）运行效果，如下：

总结：

-->1. 自定义类MarqueeTextView继承自TextView

• 实现三个构造函数；
• 复写isfocued方法，返回true（默认都有有焦点）-----> 实现多个View同时都有跑马灯效果，每个使用的MarqueeTextView都要焦点。

   平常只有一个有焦点在第一行上。

-->2. 使用自定义的类，方法是用包名和自定义类名代替TextView(src下的包名+类名）

3. Android系统中TextView实现跑马灯效果，必须具备以下几个条件：

• android:ellipsize="marquee"

• TextView必须单行显示，即内容必须超出TextView大小

• TextView要获得焦点才能滚动

转载于:.html