Android UI系列-----ScrollView和HorizontalScrollView的詳解
本篇隨筆將講解一下Android當(dāng)中比較常用的兩個(gè)布局容器--ScrollView和HorizontalScrollView,從字面意義上來(lái)看也是非常的簡(jiǎn)單的,ScrollView就是一個(gè)可以滾動(dòng)的View,這個(gè)滾動(dòng)的方向是垂直方向的,而HorizontalScrollView則是一個(gè)水平方向的可以滾動(dòng)的View。本篇隨筆可能描述性的知識(shí)比較少,最主要還是通過(guò)代碼來(lái)看看如何使用這兩個(gè)View。
一、ScrollView的簡(jiǎn)單介紹
首先來(lái)看看ScrollView和HorizontalScrollView這兩個(gè)View的定義。ScrollView和HorizontalScrollView都是一個(gè)布局容器,里面可以放入child View控件,我們通過(guò)其繼承關(guān)系看到,ScrollView和HorizontalScrollView這兩個(gè)類(lèi)是ViewGroup的一個(gè)間接子類(lèi)。
java.lang.Object
↳ android.view.View
↳ android.view.ViewGroup
↳ android.widget.FrameLayout
↳ android.widget.ScrollView
java.lang.Object
↳ android.view.View
↳ android.view.ViewGroup
↳ android.widget.FrameLayout
↳ android.widget.HorizontalScrollView
因?yàn)镾crollView和HorizontalScrollView只是兩種滾動(dòng)方向不同的View而已,其他方面都基本相同,所以下面只單單以ScrollView來(lái)講解。
通過(guò)使用ScrollView,我們可以滾動(dòng)其里面的子View控件,這樣就允許我們控件的高度可以大于我們實(shí)際屏幕的尺寸高度。ScrollView是一個(gè)FrameLayout,至于什么是FrameLayout,簡(jiǎn)單的來(lái)說(shuō),F(xiàn)rameLayout通常被用來(lái)設(shè)計(jì)成在屏幕上占用一塊地方并且里面只有一個(gè)Item,我們常用到的例如DatePicker、TimePicker這些控件都是屬于FrameLayout布局的。因此在ScrollView當(dāng)中,也通常只包含一個(gè)子元素,并且這個(gè)子元素也是一個(gè)布局文件,這樣我們才能在這個(gè)布局文件里面添加我們想要的任何子控件,從而實(shí)現(xiàn)滾動(dòng)的效果。
對(duì)于ScrollView來(lái)說(shuō),因?yàn)槠涫谴怪狈较蛏系臐L動(dòng)布局,因此通常我們給其添加一個(gè)LinearLayout的子元素,并且設(shè)置orientation為vertical(垂直方向的)。下面我們通過(guò)一個(gè)小例子來(lái)看看如何使用我們的ScrollView來(lái)展示多張圖片,并且實(shí)現(xiàn)圖片的垂直方向的滾動(dòng)。
首先我們定義一個(gè)ScrollView,因?yàn)镾crollView也是一個(gè)ViewGroup,所以我們可以直接使用ScrollView作為我們的xml文件的根元素:
<?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:fillViewport="false"> <LinearLayout android:id="@+id/layout" android:layout_height="match_parent" android:layout_width="wrap_content" android:orientation="vertical"/> </ScrollView>
我們看到,在ScrollView元素下面我們還給其定義了一個(gè)LinearLayout,并且設(shè)置了其方向?yàn)榇怪狈较虻木€(xiàn)性布局。我們添加圖片的操作放在了代碼中來(lái)完成。下面來(lái)看一下ScrollViewActivity這個(gè)類(lèi):
public class ScrollViewActivity extends Activity { private LinearLayout layout; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.layout_scrollview); layout = (LinearLayout) findViewById(R.id.layout); for(int i = 0; i < 8; i++) { // 通過(guò)資源文件來(lái)獲得指定一個(gè)Drawable對(duì)象 Drawable drawable = getResources().getDrawable(R.drawable.kk_hero); ImageView imageView = new ImageView(this); imageView.setImageDrawable(drawable); layout.addView(imageView); } } }
我們看到,這個(gè)Activity非常的簡(jiǎn)單,因?yàn)長(zhǎng)inearLayout就是一個(gè)ViewGroup對(duì)象,所以我們可以動(dòng)態(tài)的給其添加我們想要的View控件,這里我們給其添加了8張圖片,我們來(lái)看看效果:
我們看到,在A(yíng)ctivity啟動(dòng)以后,就會(huì)在其下面生成8個(gè)ImageView的對(duì)象,并且這幾張圖片是可以在垂直方向上滾動(dòng)的。
二、通過(guò)ScrollView實(shí)現(xiàn)從服務(wù)器端獲取一條新聞,顯示在界面上
接下來(lái)咱們通過(guò)ScrollView來(lái)做一個(gè)稍微實(shí)際一點(diǎn)的例子,我們經(jīng)常會(huì)用手機(jī)來(lái)看新聞,當(dāng)然一篇新聞是從服務(wù)器端獲取過(guò)來(lái)的數(shù)據(jù),而且可能一篇新聞里面有很多的內(nèi)容,因此我們需要使用一個(gè)可以滾動(dòng)的布局來(lái)顯示我們的新聞內(nèi)容,而TextView本身是可以實(shí)現(xiàn)文本的滾動(dòng)顯示的,但是結(jié)合ScrollView和TextView可以有更好的效果。
我們服務(wù)器端就很簡(jiǎn)單,讓我們的應(yīng)用程序訪(fǎng)問(wèn)服務(wù)器端的一個(gè)Html的文件,我們知道Html的文件里面會(huì)有許多的Html標(biāo)簽,那么我們?nèi)绻朐贏(yíng)ndroid上也能夠顯示標(biāo)簽的樣式,就不能單單的只是將獲取到的文本內(nèi)容展示出來(lái)而已,這里就需要用的Android提供的一個(gè) Html 的類(lèi),用它來(lái)處理我們從服務(wù)器端獲得的Html的字符串內(nèi)容:
我們的布局文件還是使用的剛才那一個(gè):
<?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:fillViewport="false"> <LinearLayout android:id="@+id/layout" android:layout_height="match_parent" android:layout_width="wrap_content" android:orientation="vertical"/> </ScrollView>
因?yàn)橐L(fǎng)問(wèn)網(wǎng)絡(luò),所以這里需要新建一個(gè)HttpUtils的工具類(lèi),來(lái)獲得服務(wù)器端的文本內(nèi)容:
public class HttpUtils { /** * 訪(fǎng)問(wèn)服務(wù)器端的內(nèi)容 * @param path 訪(fǎng)問(wèn)的url地址 * @param encode 編碼方式 * @return 返回String類(lèi)型的值 */ public static String getDataFromServer(String path, String encode) { String result = ""; HttpClient httpClient = new DefaultHttpClient(); try { HttpPost httpPost = new HttpPost(path); HttpResponse httpResponse = httpClient.execute(httpPost); if (httpResponse != null && httpResponse.getStatusLine().getStatusCode() == HttpStatus.SC_OK) { result = EntityUtils.toString(httpResponse.getEntity(), "utf-8"); } } catch (Exception e) { e.printStackTrace(); } finally { httpClient.getConnectionManager().shutdown(); } return result; } }
我們還是用之前那個(gè)Activity:
public class ScrollViewActivity extends Activity { private LinearLayout layout; private ProgressDialog dialog; private TextView textView; private final String PATH = "http://172.25.152.34:8080/httptest/news.html"; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.layout_scrollview); dialog = new ProgressDialog(this); dialog.setTitle("提示信息"); dialog.setMessage("loading......"); dialog.setCancelable(false); dialog.setProgressStyle(ProgressDialog.STYLE_SPINNER); layout = (LinearLayout) findViewById(R.id.layout); textView = new TextView(this); layout.addView(textView); new MyTask().execute(PATH); } public class MyTask extends AsyncTask<String, Void, String> { @Override protected void onPreExecute() { dialog.show(); } @Override protected String doInBackground(String... params) { String result = HttpUtils.getDataFromServer(params[0], "utf-8"); return result; } @Override protected void onPostExecute(String s) { // Html類(lèi)的fromHtml方法可以處理一個(gè)Html的字符串文本,這樣就可以根據(jù)Html的標(biāo)簽在手機(jī)上展示其樣式 Spanned spanned = Html.fromHtml(s); textView.setText(spanned); // 給TextView設(shè)置一個(gè)方法,傳一個(gè)LinkMovementMethod對(duì)象進(jìn)去,這樣當(dāng)文本中如果有href鏈接時(shí),系統(tǒng)會(huì)自動(dòng)打開(kāi)瀏覽器跳轉(zhuǎn)到該href上 textView.setMovementMethod(new LinkMovementMethod()); dialog.dismiss(); } } }
因?yàn)橐L(fǎng)問(wèn)網(wǎng)絡(luò)數(shù)據(jù),所以我們需要開(kāi)啟一個(gè)AsyncTask的一部任務(wù),我們來(lái)看看onPostExecute方法,在獲取到服務(wù)器端的Html文本內(nèi)容后,我們通過(guò)Android提供的Html.fromHtml方法可以處理我們的Html文本,將Html的標(biāo)簽轉(zhuǎn)化為我們需要的樣式顯示,但是這里要注意一點(diǎn),這里并不會(huì)處理所有的Html的表情,例如<img>我們來(lái)看看Android官方API對(duì)這個(gè)方法的描述:
public static Spanned fromHtml (String source) Returns displayable styled text from the provided HTML string. Any <img> tags in the HTML will display as a generic replacement image which your program can then go through and replace with real images. This uses TagSoup to handle real HTML, including all of the brokenness found in the wild.
如果文本當(dāng)中有<img>標(biāo)簽,那么這個(gè)方法就會(huì)用一個(gè)默認(rèn)的圖片來(lái)代替我們的<img>標(biāo)簽中的圖片,我們可以自己寫(xiě)一個(gè)Html.ImageGetter來(lái)加載我們自己想要的圖片。
同時(shí),因?yàn)槲谋緝?nèi)容中可能有href鏈接,因此我們可以通過(guò) textView.setMovementMethod(new LinkMovementMethod()); 來(lái)綁定一個(gè)LinkMovementMethod,這樣在點(diǎn)擊鏈接的時(shí)候,就會(huì)調(diào)用瀏覽器跳轉(zhuǎn)到該鏈接上。
相信通過(guò)前面的講解,大家對(duì)ScrollView有了進(jìn)一步的認(rèn)識(shí),這里并沒(méi)有講太多的HorizontalScrollView的知識(shí),因?yàn)檫@個(gè)其實(shí)是和ScrollView基本上是一樣的,只不過(guò)一個(gè)是垂直方向的滾動(dòng),而HorizontalScrollView是水平方向的滾動(dòng),同樣HorizontalScrollView也是一個(gè)FrameLayout,因此我們通常給其定義一個(gè)水平方向布局的LinearLayout子元素,這樣我們?cè)诶锩嫣砑拥腣iew子控件就可以在水平方向上滾動(dòng)顯示了。
三、總結(jié)
本篇隨筆主要講解了一下ScrollView和HorizontalScrollView的知識(shí),因?yàn)檫@兩個(gè)布局容器比較簡(jiǎn)單,因此基本上概念性的東西講的少,主要還是通過(guò)代碼來(lái)了解了ScrollView的使用方式,而對(duì)于HorizontalScrollView,其使用方式大同小異,大家可以通過(guò)Android官方API來(lái)了解更多有關(guān)這兩個(gè)控件的知識(shí)。
原文鏈接:http://www.cnblogs.com/xiaoluo501395377/p/3460645.html
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android開(kāi)發(fā)中實(shí)現(xiàn)IOS風(fēng)格底部選擇器(支持時(shí)間 日期 自定義)
這篇文章主要介紹了Android開(kāi)發(fā)中實(shí)現(xiàn)IOS風(fēng)格底部選擇器(支持時(shí)間 日期 自定義)的相關(guān)資料,需要的朋友可以參考下2016-11-11Android Flutter實(shí)現(xiàn)五種酷炫文字動(dòng)畫(huà)效果詳解
animated_text_kit這一動(dòng)畫(huà)庫(kù)有多種文字動(dòng)畫(huà)效果,文中將利用它實(shí)現(xiàn)五種酷炫的文字動(dòng)畫(huà):波浪涌動(dòng)效果、波浪線(xiàn)跳動(dòng)文字組、彩虹動(dòng)效、滾動(dòng)廣告牌效果和打字效果,需要的可以參考一下2022-03-03android scrollview 自動(dòng)滾動(dòng)到頂部或者底部的實(shí)例
這篇文章主要介紹了android scrollview 自動(dòng)滾動(dòng)到頂部或者底部的相關(guān)資料,需要的朋友可以參考下2017-06-06Android通過(guò)ImageView設(shè)置手指滑動(dòng)控件縮放
這篇文章主要介紹了Android通過(guò)ImageView設(shè)置手指滑動(dòng)控件縮放效果,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-12-12Flutter文本Text和輸入框TextField組件使用示例
這篇文章主要為大家介紹了Flutter文本Text和輸入文本框TextField組件使用示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08Android?Flutter控件封裝之視頻進(jìn)度條的實(shí)現(xiàn)
這篇文章主要來(lái)和大家分享一個(gè)很簡(jiǎn)單的控制器封裝案例,包含了基本的播放暫停,全屏和退出全屏,文中的示例代碼講解詳細(xì),感興趣的可以了解一下2023-06-06Android PopupWindow被輸入法彈上去之后無(wú)法恢復(fù)原位的解決辦法
這篇文章主要介紹了Android PopupWindow被輸入法彈上去之后無(wú)法恢復(fù)原位的解決辦法,需要的朋友可以參考下2016-12-12