Pretty UI Design For Android -- 滑动背景、透明列表
来源:互联网 发布:软件研发任务分配 编辑:程序博客网 时间:2024/04/28 10:13
本文是从国外一个网上看到的效果,感觉很不错,就简化了一下代码,拿来用了,先看下效果图:
效果还是很不错的,下面让我们看看是如何实现的:
看看文字来源,很简单,是一个数组:
- <?xml version="1.0" encoding="utf-8"?>
- <resources>
-
- <string-array name="list_content">
- <item>If I could save time in a bottle </item>
- <item>the first thing that I\'d like to do </item>
- <item>is to save every day until eternity passes away </item>
- <item>just to spend them with you </item>
- <item>If I could save time in a bottle </item>
- <item>the first thing that I\'d like to do </item>
- <item>is to save every day until eternity passes away </item>
- <item>just to spend them with you </item>
- <item>If I could make days last forever </item>
- <item>if words could make wishes come true </item>
- <item>I\'d save every day like a treasure and then </item>
- <item>again I would spend them with you </item>
- <item>Thank you for comforting me when I\'m sad </item>
- <item>Loving me when I\'m mad </item>
- <item>Picking me up when I\'m down </item>
- <item>Thank you for being my friend and being around </item>
- <item>Teaching me the meaning of love </item>
- <item>Encouraging me when I need a shove </item>
- <item>But most of all thank you for </item>
- <item>Loving me for who I am </item>
- </string-array>
-
- </resources>
布局也很简单:- <FrameLayout 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">
-
- <com.example.scrolltest.TopCenterImageView
- android:id="@+id/bg"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:src="@drawable/image" />
-
- <ListView
- android:id="@+id/list"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:divider="@null"/>
-
- </FrameLayout>
因为我们是用的一个listview来显示的,所以这样做就是最简单的了。
ok下面我们来看看程序是怎样的:
- package com.example.scrolltest;
-
- import android.app.Activity;
- import android.os.Bundle;
- import android.view.View;
- import android.widget.AbsListView;
- import android.widget.AbsListView.LayoutParams;
- import android.widget.AbsListView.OnScrollListener;
- import android.widget.ArrayAdapter;
- import android.widget.ListView;
-
- public class MainActivity extends Activity {
-
- private TopCenterImageView bg;
- private ListView list;
- private View head;
-
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
-
- bg = (TopCenterImageView) findViewById(R.id.bg);
- list = (ListView) findViewById(R.id.list);
- list.setAdapter(new ArrayAdapter<String>(this, R.layout.list_item,
- getResources().getStringArray(R.array.list_content)));
-
- head = new View(this);
- head.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, 700));
- list.addHeaderView(head);
-
- list.setOnScrollListener(new OnScrollListener() {
-
- @Override
- public void onScrollStateChanged(AbsListView view, int scrollState) {
- }
-
- @Override
- public void onScroll(AbsListView view, int firstVisibleItem,
- int visibleItemCount, int totalItemCount) {
- int top = head.getTop() / 2;
- bg.setTop(top);
- }
- });
- }
- }
其中有一个TopCenterImageView,相信大家会比较疑惑,让我们来看看他是什么:- package com.example.scrolltest;
-
- import android.content.Context;
- import android.graphics.Matrix;
- import android.util.AttributeSet;
- import android.widget.ImageView;
-
-
-
-
-
-
-
- public class TopCenterImageView extends ImageView {
-
- public TopCenterImageView(Context context, AttributeSet attrs, int defStyle) {
- super(context, attrs, defStyle);
- setScaleType(ScaleType.MATRIX);
- }
-
- public TopCenterImageView(Context context, AttributeSet attrs) {
- super(context, attrs);
- setScaleType(ScaleType.MATRIX);
- }
-
- public TopCenterImageView(Context context) {
- super(context);
- setScaleType(ScaleType.MATRIX);
- }
-
-
-
-
- @Override
- protected boolean setFrame(int l, int t, int r, int b) {
- if (getDrawable() == null) {
- return super.setFrame(l, t, r, b);
- }
- Matrix matrix = getImageMatrix();
- float scaleFactor = getWidth() / (float) getDrawable().getIntrinsicWidth();
- matrix.setScale(scaleFactor, scaleFactor);
- setImageMatrix(matrix);
- return super.setFrame(l, t, r, b);
- }
-
- }
这个重写的ImageView是为了能够设置ImageView的大小,让他符合我们的背景,注释写的很清楚:Custom view allowing an image to be displayed with a "top crop" scale type这时候大家再看代码就很清楚了吧,效果还是很赞的~
以上。
0 0