系出名门Android(7) - 控件(View)之ZoomControls, Include, VideoView, WebView, RatingBar, Tab

简介:
[索引页]
[源码下载]


系出名门Android(7) - 控件(View)之ZoomControls, Include, VideoView, WebView, RatingBar, Tab, Spinner, Chronometer, ScrollView


作者: webabcd


介绍
在 Android 中使用各种控件(View)
  • ZoomControls - 放大/缩小按钮控件
  • Include - 整合控件
  • VideoView - 视频播放控件
  • WebView - 浏览器控件
  • RatingBar - 评分控件
  • Tab - 选项卡控件
  • Spinner - 下拉框控件
  • Chronometer - 计时器控件
  • ScrollView - 滚动条控件


1、ZoomControls 的 Demo
zoomcontrols.xml 
<? xml   version ="1.0"   encoding ="utf-8" ?>  
< LinearLayout   xmlns:android ="http://schemas.android.com/apk/res/android"  
         android:orientation ="vertical"   android:layout_width ="fill_parent"  
         android:layout_height ="fill_parent" >  

        <!--  
                放大/缩小按钮控件 
        
-->  
         < ZoomControls   android:id ="@+id/zoomControls"  
                 android:layout_width ="wrap_content"   android:layout_height ="wrap_content" > </ ZoomControls >  

</ LinearLayout >
 
_ZoomControls.java
package  com.webabcd.view;  

import  android.app.Activity;  
import  android.os.Bundle;  
import  android.view.View;  
import  android.view.View.OnClickListener;  
import  android.widget.Toast;  
import  android.widget.ZoomControls;  

public   class  _ZoomControls   extends  Activity {  

        @Override  
         protected   void  onCreate(Bundle savedInstanceState) {  
                 // TODO Auto-generated method stub 
                 super.onCreate(savedInstanceState);  
                 this.setContentView(R.layout.zoomcontrols);  

                setTitle( "ZoomControls");  

                ZoomControls zoomControls = (ZoomControls)   this.findViewById(R.id.zoomControls);  
                 // setOnZoomInClickListener() - 响应单击放大按钮的事件 
                zoomControls.setOnZoomInClickListener( new  OnClickListener() {  
                         public   void  onClick(View v) {  
                                Toast.makeText(_ZoomControls. this,   "单击了放大按钮", Toast.LENGTH_SHORT).show();  
                        }  
                });  
                  
                 // setOnZoomOutClickListener() - 响应单击缩小按钮的事件 
                zoomControls.setOnZoomOutClickListener( new  OnClickListener() {  
                         public   void  onClick(View v) {  
                                Toast.makeText(_ZoomControls. this,   "单击了缩小按钮", Toast.LENGTH_SHORT).show();          
                        }  
                });  

        }  
}
 
 
2、Include 的 Demo
include.xml
<? xml   version ="1.0"   encoding ="utf-8" ?>  
< LinearLayout   xmlns:android ="http://schemas.android.com/apk/res/android"  
         android:orientation ="vertical"   android:layout_width ="fill_parent"  
         android:layout_height ="fill_parent" >  

        <!--  
                include - 整合控件,将指定的 layout 整合进来 
                        layout - 指定需要整合 layout 
        
-->  
         < include   android:id ="@+id/cell1"   layout ="@layout/include_1"   />  
         < include   android:id ="@+id/cell2"   android:layout_width ="fill_parent"   layout ="@layout/include_2"   />  

</ LinearLayout >
 
include_1.xml
<? xml   version ="1.0"   encoding ="utf-8" ?>  
< TextView   xmlns:android ="http://schemas.android.com/apk/res/android"  
         android:text ="TextView01"   android:layout_width ="wrap_content"  
         android:layout_height ="wrap_content" >  
</ TextView >
 
include_2.xml
<? xml   version ="1.0"   encoding ="utf-8" ?>  
< TextView   xmlns:android ="http://schemas.android.com/apk/res/android"  
         android:text ="TextView02"   android:layout_width ="wrap_content"  
         android:layout_height ="wrap_content" >  
</ TextView >
 
_Include.java
package  com.webabcd.view;  

import  android.app.Activity;  
import  android.os.Bundle;  

public   class  _Include   extends  Activity {  

        @Override  
         protected   void  onCreate(Bundle savedInstanceState) {  
                 // TODO Auto-generated method stub 
                 super.onCreate(savedInstanceState);  
                 this.setContentView(R.layout.include);  

                setTitle( "Include");  
        }  
}
 
 
3、VideoView 的 Demo
videoview.xml
<? xml   version ="1.0"   encoding ="utf-8" ?>  
< LinearLayout   xmlns:android ="http://schemas.android.com/apk/res/android"  
         android:orientation ="vertical"   android:layout_width ="fill_parent"  
         android:layout_height ="fill_parent" >  

        <!--  
                VideoView - 视频播放控件 
        
-->  
         < VideoView   android:id ="@+id/videoView"   android:layout_width ="wrap_content"  
                 android:layout_height ="wrap_content" >  
         </ VideoView >  
                  
</ LinearLayout >
 
_VideoView.java
package  com.webabcd.view;  

import  android.app.Activity;  
import  android.net.Uri;  
import  android.os.Bundle;  
import  android.widget.MediaController;  
import  android.widget.VideoView;  

public   class  _VideoView   extends  Activity {  

        @Override  
         protected   void  onCreate(Bundle savedInstanceState) {  
                 // TODO Auto-generated method stub 
                 super.onCreate(savedInstanceState);  
                 this.setContentView(R.layout.videoview);  

                setTitle( "VideoView");  
                  
                VideoView videoView = (VideoView) findViewById(R.id.videoView);  
                  
                 // 指定需要播放的视频的地址 
                videoView.setVideoURI(Uri.parse( "android.resource://com.webabcd.view/" + R.raw.demo)); 
                // videoView.setVideoPath(); 
                    
                // 设置播放器的控制条 
                videoView.setMediaController(new MediaController(this)); 
                // 开始播放视频 
                videoView.start(); 
        } 
}
 
 
4、WebView 的 Demo
webview.xml
<? xml   version ="1.0"   encoding ="utf-8" ?>  
< LinearLayout   xmlns:android ="http://schemas.android.com/apk/res/android"  
         android:orientation ="vertical"   android:layout_width ="fill_parent"  
         android:layout_height ="fill_parent" >  

        <!--  
                WebView - 浏览器控件(WebKit 内核) 
        
-->  
         < WebView   android:layout_width ="fill_parent"  
                 android:layout_height ="wrap_content"   android:id ="@+id/webView"   />  
                  
</ LinearLayout >
 
_WebView.java
package  com.webabcd.view;  

import  android.app.Activity;  
import  android.os.Bundle;  
import  android.webkit.WebSettings;  
import  android.webkit.WebView;  

public   class  _WebView   extends  Activity {  

        @Override  
         protected   void  onCreate(Bundle savedInstanceState) {  
                 // TODO Auto-generated method stub 
                 super.onCreate(savedInstanceState);  
                 this.setContentView(R.layout.webview);  

                setTitle( "WebView");  
                  
                WebView webView = (WebView) findViewById(R.id.webView);  

                 // 配置浏览器,使其可支持 JavaScript 
                WebSettings webSettings = webView.getSettings();  
                webSettings.setJavaScriptEnabled( true);  
                  
                 // 清除浏览器缓存 
                webView.clearCache( true);  
                 // 指定浏览器需要解析的 url 地址 
                webView.loadUrl( "http://webabcd.cnblogs.com/"); 
                // 指定浏览器需要解析的 html 数据 
                // webView.loadData("<a href='http://webabcd.cnblogs.com/'>webabcd</a>", "text/html", "utf-8"); 
        } 
}
 
 
5、RatingBar 的 Demo
ratingbar.xml
<? xml   version ="1.0"   encoding ="utf-8" ?>  
< LinearLayout   xmlns:android ="http://schemas.android.com/apk/res/android"  
         android:orientation ="vertical"   android:layout_width ="fill_parent"  
         android:layout_height ="fill_parent" >  

        <!--  
                RatingBar - 评分控件 
                        numStars - 评分控件的星星的数量 
                        rating - 当前评分的值         
        
-->  
         < RatingBar   android:id ="@+id/ratingBar"   android:numStars ="5"  
                 android:rating ="1.5"   android:layout_width ="wrap_content"  
                 android:layout_height ="wrap_content" >  
         </ RatingBar >  

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

</ LinearLayout >
 
_RatingBar.java
package  com.webabcd.view;  

import  android.app.Activity;  
import  android.os.Bundle;  
import  android.widget.RatingBar;  
import  android.widget.TextView;  

public   class  _RatingBar   extends  Activity   implements  RatingBar.OnRatingBarChangeListener {  

         private  RatingBar mRatingBar;  
         private  TextView mTextView;  

        @Override  
         protected   void  onCreate(Bundle savedInstanceState) {  
                 // TODO Auto-generated method stub 
                 super.onCreate(savedInstanceState);  
                 this.setContentView(R.layout.ratingbar);  

                setTitle( "RatingBar");  

                mTextView = (TextView) findViewById(R.id.textView);  
                mRatingBar = (RatingBar) findViewById(R.id.ratingBar);  

                 // setOnRatingBarChangeListener() - 响应评分值发生改变的事件 
                mRatingBar.setOnRatingBarChangeListener( this);  
        }  

        @Override  
         public   void  onRatingChanged(RatingBar ratingBar,   float  rating,  
                         boolean  fromUser) {  
                mTextView.setText(String.valueOf(rating));  
        }  
}
 
 
6、Tab 的 Demo
tab.xml
<? xml   version ="1.0"   encoding ="utf-8" ?>  
< FrameLayout   xmlns:android ="http://schemas.android.com/apk/res/android"  
         android:layout_width ="fill_parent"   android:layout_height ="fill_parent" >  

        <!--  Tab 1 的内容 -->  
         < TextView   android:id ="@+id/view1"   android:layout_width ="fill_parent"  
                 android:layout_height ="fill_parent"   android:text ="tab1 content"   />  
                  
        <!--  Tab 2 的内容 -->  
         < TextView   android:id ="@+id/view2"   android:layout_width ="fill_parent"  
                 android:layout_height ="fill_parent"   android:text ="tab2 content"   />  

</ FrameLayout >
 
_Tab.java
package  com.webabcd.view;  

import  android.app.TabActivity;  
import  android.content.Intent;  
import  android.os.Bundle;  
import  android.view.LayoutInflater;  
import  android.widget.TabHost;  

// 实现 Tab 功能的话要继承 TabActivity 
public   class  _Tab   extends  TabActivity {  

        @Override  
         protected   void  onCreate(Bundle savedInstanceState) {  
                 // TODO Auto-generated method stub 
                 super.onCreate(savedInstanceState);  

                TabHost tabHost = getTabHost();  
                LayoutInflater.from( this).inflate(R.layout.tab, tabHost.getTabContentView(),   true);  

                 // Tab 1 的内容 
                tabHost.addTab(tabHost.newTabSpec( "tab1")  
                                .setIndicator( "tab1")  
                                .setContent(R.id.view1));  
                  
                 // Tab 2 的内容(设置了 Tab 图片) 
                tabHost.addTab(tabHost.newTabSpec( "tab2")  
                                .setIndicator( "tab2", getResources().getDrawable(R.drawable.icon01))  
                                .setContent(R.id.view2));  
                  
                 // Tab 3 的内容(设置 Tab 的内容为指定的 Activity) 
                tabHost.addTab(tabHost.newTabSpec( "tab3")  
                                .setIndicator( "tab3")  
                                .setContent( new  Intent( this, _TextView. class)));  

        }  
}
 
 
7、Spinner 的 Demo
spinner.xml
<? xml   version ="1.0"   encoding ="utf-8" ?>  
< LinearLayout   xmlns:android ="http://schemas.android.com/apk/res/android"  
         android:orientation ="vertical"   android:layout_width ="fill_parent"  
         android:layout_height ="fill_parent" >  

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

        <!--  
                Spinner - 下拉框控件 
        
-->                  
         < Spinner   android:id ="@+id/spinner"   android:layout_width ="fill_parent"  
                 android:layout_height ="wrap_content"   />  

</ LinearLayout >
 
_Spinner.java
package  com.webabcd.view;  

import  android.app.Activity;  
import  android.os.Bundle;  
import  android.view.View;  
import  android.widget.AdapterView;  
import  android.widget.ArrayAdapter;  
import  android.widget.Spinner;  
import  android.widget.TextView;  

public   class  _Spinner   extends  Activity {  

        @Override  
         protected   void  onCreate(Bundle savedInstanceState) {  
                 // TODO Auto-generated method stub 
                 super.onCreate(savedInstanceState);  
                 this.setContentView(R.layout.spinner);  

                setTitle( "Spinner");  

                Spinner spinner = (Spinner) findViewById(R.id.spinner);  
                  
                 // 设置下拉框控件的标题文本 
                spinner.setPrompt( "请选择");  
                 // 实例化适配器,指定显示格式及数据源 
                ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(  
                                 this, R.array.colors, android.R.layout.simple_spinner_item);  
                adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);  
                spinner.setAdapter(adapter);  

                 // setOnItemSelectedListener() - 响应下拉框的选中值发生变化的事件 
                spinner.setOnItemSelectedListener( new  AdapterView.OnItemSelectedListener() {  
                        @Override  
                         public   void  onItemSelected(AdapterView<?> arg0, View arg1,  
                                         int  arg2,   long  arg3) {  
                                TextView textView = (TextView)_Spinner. this.findViewById(R.id.textView);  
                                textView.setText(((TextView)arg1).getText());  
                        }  

                        @Override  
                         public   void  onNothingSelected(AdapterView<?> arg0) {  
                                                                  
                        }  
                });  
        }  
}
 
 
8、Chronometer 的 Demo
chronometer.xml
<? xml   version ="1.0"   encoding ="utf-8" ?>  
< LinearLayout   xmlns:android ="http://schemas.android.com/apk/res/android"  
         android:orientation ="vertical"   android:layout_width ="fill_parent"  
         android:layout_height ="fill_parent" >  

        <!--  
                Chronometer - 计时器控件 
        
-->  
         < Chronometer   android:id ="@+id/chronometer"  
                 android:layout_width ="wrap_content"   android:layout_height ="wrap_content"   />  

         < Button   android:id ="@+id/btnStart"   android:layout_width ="wrap_content"  
                 android:layout_height ="wrap_content"   android:text ="开始计时" >  
                 < requestFocus   />  
         </ Button >  

         < Button   android:id ="@+id/btnStop"   android:layout_width ="wrap_content"  
                 android:layout_height ="wrap_content"   android:text ="停止计时" >  
         </ Button >  

         < Button   android:id ="@+id/btnReset"   android:layout_width ="wrap_content"  
                 android:layout_height ="wrap_content"   android:text ="计时器复位" >  
         </ Button >  

</ LinearLayout >
 
_Chronometer.java
package  com.webabcd.view;  

import  android.app.Activity;  
import  android.os.Bundle;  
import  android.os.SystemClock;  
import  android.view.View;  
import  android.view.View.OnClickListener;  
import  android.widget.Button;  
import  android.widget.Chronometer;  

public   class  _Chronometer   extends  Activity {  

         private  Chronometer mChronometer;  

        @Override  
         protected   void  onCreate(Bundle savedInstanceState) {  
                 // TODO Auto-generated method stub 
                 super.onCreate(savedInstanceState);  
                 this.setContentView(R.layout.chronometer);  

                setTitle( "Chronometer");  

                Button button;  

                mChronometer = (Chronometer) findViewById(R.id.chronometer);  
                 // 设置计时器所显示的时间格式 
                mChronometer.setFormat( "计时:(%s)");  
                  
                button = (Button) findViewById(R.id.btnStart);  
                button.setOnClickListener(mStartListener);  

                button = (Button) findViewById(R.id.btnStop);  
                button.setOnClickListener(mStopListener);  

                button = (Button) findViewById(R.id.btnReset);  
                button.setOnClickListener(mResetListener);  
        }  

        View.OnClickListener mStartListener =   new  OnClickListener() {  
                 public   void  onClick(View v) {  
                         // 启动计时器 
                        mChronometer.start();  
                }  
        };  

        View.OnClickListener mStopListener =   new  OnClickListener() {  
                 public   void  onClick(View v) {  
                         // 暂停计时器 
                        mChronometer.stop();  
                }  
        };  

        View.OnClickListener mResetListener =   new  OnClickListener() {  
                 public   void  onClick(View v) {  
                         // 复位计时器,即停止计时器 
                        mChronometer.setBase(SystemClock.elapsedRealtime());  
                }  
        };  
}
 
 
9、ScrollView 的 Demo 
scrollview.xml
<? xml   version ="1.0"   encoding ="utf-8" ?>  
< LinearLayout   xmlns:android ="http://schemas.android.com/apk/res/android"  
         android:orientation ="vertical"   android:layout_width ="fill_parent"  
         android:layout_height ="fill_parent" >  

        <!--  
                ScrollView - 滚动条控件 
                        scrollbarStyle - 滚动条的样式 
        
-->  
         < ScrollView   android:id ="@+id/scrollView"  
                 android:layout_width ="fill_parent"   android:layout_height ="200px"  
                 android:scrollbarStyle ="outsideOverlay"   android:background ="@android:drawable/edit_text" >  
                 < TextView   android:layout_width ="fill_parent"  
                         android:layout_height ="wrap_content"   android:id ="@+id/textView"   />  
         </ ScrollView >  

</ LinearLayout >
 
_ScrollView.java
package  com.webabcd.view;  

import  android.app.Activity;  
import  android.os.Bundle;  
import  android.widget.TextView;  

public   class  _ScrollView   extends  Activity {  

        @Override  
         protected   void  onCreate(Bundle savedInstanceState) {  
                 // TODO Auto-generated method stub 
                 super.onCreate(savedInstanceState);  
                 this.setContentView(R.layout.scrollview);  

                setTitle( "ScrollView");  

                TextView textView = (TextView) this.findViewById(R.id.textView);  
                textView.setText( "a\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na\na");  
        }  
}
 
 



     本文转自webabcd 51CTO博客,原文链接: http://blog.51cto.com/webabcd/342082 ,如需转载请自行联系原作者

相关文章
|
12天前
|
数据可视化 Android开发 开发者
安卓应用开发中的自定义View组件
【10月更文挑战第5天】在安卓应用开发中,自定义View组件是提升用户交互体验的利器。本篇将深入探讨如何从零开始创建自定义View,包括设计理念、实现步骤以及性能优化技巧,帮助开发者打造流畅且富有创意的用户界面。
43 0
|
1天前
|
XML 前端开发 Android开发
Android面试高频知识点(3) 详解Android View的绘制流程
Android面试高频知识点(3) 详解Android View的绘制流程
13 2
|
14天前
|
XML 前端开发 Android开发
Android View的绘制流程和原理详细解说
Android View的绘制流程和原理详细解说
27 3
|
13天前
|
XML 前端开发 Java
安卓应用开发中的自定义View组件
【10月更文挑战第5天】自定义View是安卓应用开发的一块基石,它为开发者提供了无限的可能。通过掌握其原理和实现方法,可以创造出既美观又实用的用户界面。本文将引导你了解自定义View的创建过程,包括绘制技巧、事件处理以及性能优化等关键步骤。
|
13天前
|
XML 存储 Java
浅谈Android的TextView控件
浅谈Android的TextView控件
12 0
|
1月前
|
XML 编解码 Android开发
安卓开发中的自定义视图控件
【9月更文挑战第14天】在安卓开发中,自定义视图控件是一种高级技巧,它可以让开发者根据项目需求创建出独特的用户界面元素。本文将通过一个简单示例,引导你了解如何在安卓项目中实现自定义视图控件,包括创建自定义控件类、处理绘制逻辑以及响应用户交互。无论你是初学者还是有经验的开发者,这篇文章都会为你提供有价值的见解和技巧。
37 3
|
1月前
|
缓存 搜索推荐 Android开发
安卓应用开发中的自定义View组件实践
【9月更文挑战第10天】在安卓开发领域,自定义View是提升用户体验和实现界面个性化的重要手段。本文将通过一个实际案例,展示如何在安卓项目中创建和使用自定义View组件,包括设计思路、实现步骤以及可能遇到的问题和解决方案。文章不仅提供了代码示例,还深入探讨了自定义View的性能优化技巧,旨在帮助开发者更好地掌握这一技能。
|
2月前
|
XML 前端开发 Android开发
Android面试高频知识点(3) 详解Android View的绘制流程
View的绘制和事件处理是两个重要的主题,上一篇《图解 Android事件分发机制》已经把事件的分发机制讲得比较详细了,这一篇是针对View的绘制,View的绘制如果你有所了解,基本分为measure、layout、draw 过程,其中比较难理解就是measure过程,所以本篇文章大幅笔地分析measure过程,相对讲得比较详细,文章也比较长,如果你对View的绘制还不是很懂,对measure过程掌握得不是很深刻,那么耐心点,看完这篇文章,相信你会有所收获的。
99 3
|
3月前
|
消息中间件 前端开发 Android开发
Android面试题自定义View之Window、ViewRootImpl和View的三大流程
Android开发中,View的三大核心流程包括measure(测量)、layout(布局)和draw(绘制)。MeasureSpec类在测量过程中起到关键作用,它结合尺寸大小和模式(EXACTLY、AT_MOST、UNSPECIFIED)来指定View应如何测量。onMeasure方法用于自定义View的测量,布局阶段,ViewGroup调用onLayout确定子元素位置,而draw阶段按照特定顺序绘制背景、内容、子元素和装饰。整个流程始于ViewRootImpl的performTraversals,该方法触发测量、布局和绘制。
82 0