Android仿百度貼吧看帖滑動返回效果

前幾天更新百度貼吧後，發現看帖時的滑動返回效果挺好的，在做公司項目的查找功能時就研究並使用了這種效果，實現起來其實挺簡單的，代碼是從公司項目裏提取出來的，所以就多增送一個搜索界面的AutoCompleteTextView控件使用。
先簡單介紹一下原理：
滑動效果：使用Fragment+ViewPager實現，將兩個Fragment添加到ViewPager中，第一個Fragment設置成透明背景，第二個Fragment是自己想要的頁面；監聽ViewPager滑動事件，通過參數判斷滑動位置，改變背景透明度並在頁面全部劃過時結束當前頁面；增加頁面跳轉和返回時的動態效果。

搜索功能中AutoCompleteTextView控件的使用：動態監聽AutoCompleteTextView中內容變化，保存並顯示最近搜索的10條記錄，監聽彈出列表的點擊事件等。

下面直接上代碼：

1、主頁面佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"  
    android:id="@+id/blank_linear"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#44000000"  
    android:orientation="vertical" >
    
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>

</LinearLayout>

2、使用Fragment+ViewPager實現實現滑動效果

package com.cx.intentdemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.SimpleOnPageChangeListener;
import android.widget.LinearLayout;

public class MainActivity extends FragmentActivity{
	private ViewPager viewPager;
	private LinearLayout blankLinear;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		initView();
		initData();
		setListener();
	}

	private void initView() {
		// TODO Auto-generated method stub
		viewPager = (ViewPager) findViewById(R.id.viewPager1);
		blankLinear = (LinearLayout) findViewById(R.id.blank_linear);  
	}

	private void initData() {
		// TODO Auto-generated method stub
		viewPager.setAdapter(adapter);
		viewPager.setCurrentItem(1, false);
		viewPager.setOnPageChangeListener(changeListener);
	}

	private void setListener() {
		// TODO Auto-generated method stub
		
	}
	
	private FragmentPagerAdapter adapter = new FragmentPagerAdapter(
			getSupportFragmentManager()) {

		public int getCount() {
			return 2;
		}

		public Fragment getItem(int position) {
			Fragment fragment = null;
			switch (position) {
			case 0:
				fragment = new BlankFragment();
				break;
			case 1:
				fragment = new SearchFragment();
				break;
			}
			return fragment;
		}
	};
	
	private SimpleOnPageChangeListener changeListener = new SimpleOnPageChangeListener() {

		public void onPageScrolled(int position, float positionOffset,
				int positionOffsetPixels) {
			//修改背景透明度
			blankLinear.getBackground().setAlpha((int) (positionOffset * 500));
			//滑動到
			if (position == 0 && positionOffset == 0.0) {
				finish();
			}
		};
	};
	
	@Override
	public void onBackPressed() {
		finish();
		overridePendingTransition(R.anim.in_from_left, R.anim.out_to_right);
	};
}

3、透明Fragment佈局

<?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:background="#01000000"  
    android:orientation="vertical" >

</LinearLayout>

4、透明Fragment界面

package com.cx.intentdemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class BlankFragment extends Fragment{

	@Override  
    public View onCreateView(LayoutInflater inflater, ViewGroup container,  
            Bundle savedInstanceState) {  
		View v = inflater.inflate(R.layout.blank_fragment, container, false);
        return v;  
    }  
  
    @Override  
    public void onActivityCreated(Bundle savedInstanceState) {  
        super.onActivityCreated(savedInstanceState);  
    } 
}

5、搜索Fragment佈局

<?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:background="#ddd"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#f1f1f1" >

        <AutoCompleteTextView
            android:id="@+id/autoCompleteTextView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginRight="10dp"
            android:layout_marginLeft="10dp"
            android:layout_toLeftOf="@+id/btn_search"
            android:background="@drawable/bg_edittext_round_2"
            android:ems="10"
            android:hint="輸入關鍵字..."
            android:paddingLeft="30dp" >

            <requestFocus />
        </AutoCompleteTextView>

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="20dp"
            android:src="@drawable/search" />

        <Button
            android:id="@+id/btn_search"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:background="@drawable/btn_submit"
            android:layout_marginRight="10dp"
            android:text="搜索" />

    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="11" >

		<ListView
	        android:id="@+id/lv_search"
	        android:layout_width="match_parent"
	        android:layout_height="wrap_content" >
	    </ListView>
        
    </LinearLayout>

</LinearLayout>

6、搜索Fragment界面功能實現

package com.cx.intentdemo;

import android.content.SharedPreferences;
import android.content.SharedPreferences.Editor;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnFocusChangeListener;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.Button;

public class SearchFragment extends Fragment {
	private AutoCompleteTextView acTextView;  
	private Button btnSearch;
	private int length;
	  
    @Override  
    public View onCreateView(LayoutInflater inflater, ViewGroup container,  
            Bundle savedInstanceState) {  
        return inflater.inflate(R.layout.search, container, false);  
    }  
  
    @Override  
    public void onActivityCreated(Bundle savedInstanceState) {  
        super.onActivityCreated(savedInstanceState);  
        
        initView();
		initData();
		setListener();
    } 
    
    private void initView() {
		// TODO Auto-generated method stub
		acTextView = (AutoCompleteTextView) getView().findViewById(R.id.autoCompleteTextView1);
		btnSearch = (Button) getView().findViewById(R.id.btn_search);
	}

	private void initData() {
		// TODO Auto-generated method stub
	}

	private void setListener() {
		// TODO Auto-generated method stub
		acTextView.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				acTextView.showDropDown();
				initAutoComplete();
			}
		});
		
		//內容變化監聽
		acTextView.addTextChangedListener(new TextWatcher() {
			
			@Override
			public void onTextChanged(CharSequence s, int start, int before, int count) {
				// TODO Auto-generated method stub
				initAutoComplete();
			}
			
			@Override
			public void beforeTextChanged(CharSequence s, int start, int count,
					int after) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void afterTextChanged(Editable s) {
				// TODO Auto-generated method stub
				
			}
		});
		
		//最近搜索列表點擊事件
		acTextView.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
					long arg3) {
				getData();
			}
		});
		btnSearch.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				saveHistory();
				getData();
			}
		});
	}
	
	/**
	 * 通過輸入內容查找數據
	 */
	private void getData(){
		//一般爲網路請求
	}
	
	/**
	 * 顯示最近10條搜索內容
	 */
	private void initAutoComplete() {  
        SharedPreferences sp = getActivity().getSharedPreferences("content", 0);  
        String longhistory = sp.getString("history", "沒有記錄");  
        String[] histories = longhistory.split(",");  
        length = histories.length;
        ArrayAdapter<String> adapter;
        if(length != 1){
        	String[] newHistories = new String[length-1];
        	System.arraycopy(histories, 0, newHistories, 0, length-1);
        	
        	adapter = new ArrayAdapter<String>(getActivity(),  
        			R.layout.simple_dropdown_item_1, newHistories); 
        }else{
        	 adapter = new ArrayAdapter<String>(getActivity(),  
        			 R.layout.simple_dropdown_item_1, histories); 
        }
        
        if (histories.length > 9) {
        	Editor editor = sp.edit();  
	        //移除數據  
	        editor.remove("history");  
	        editor.commit();
	        
            String[] newHistories = new String[10];  
            System.arraycopy(histories, 0, newHistories, 0, 10);  
            
            String str = newHistories[0];
            for (int i = 1; i < newHistories.length; i++) {
	            str += "," + newHistories[i];
			}
            editor.putString("history", str).commit();
            adapter = new ArrayAdapter<String>(getActivity(),  
                    R.layout.simple_dropdown_item_1, newHistories); 
        }  
        acTextView.setAdapter(adapter);  
        acTextView.setOnFocusChangeListener(new OnFocusChangeListener() {  
            @Override  
            public void onFocusChange(View v, boolean hasFocus) {  
                AutoCompleteTextView view = (AutoCompleteTextView) v;  
                if (hasFocus) {  
                    view.showDropDown();  
                }  
            }  
        });  
    }  
	
	/**
	 * 保存搜索內容
	 */
	private void saveHistory() {  
        String text = acTextView.getText().toString();  
        SharedPreferences sp = getActivity().getSharedPreferences("content", 0);  
        String longhistory = sp.getString("history", "沒有記錄"); 
        if (!text.equals("") && !longhistory.contains(text + ",")) {  
            StringBuilder sb = new StringBuilder(longhistory);  
            sb.insert(0, text + ",");  
            sp.edit().putString("history", sb.toString()).commit();  
        }  
    }
}

7、上面的基本功能已經完成了，但爲了增加美觀效果，在向該頁面跳轉時最好增加跳轉效果。

overridePendingTransition(R.anim.in_from_right, R.anim.out_to_left);

in_from_left：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
        android:fromXDelta="-100%p" 
        android:toXDelta="0%p"
        android:duration="500" />
</set>

in_from_right：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
        android:fromXDelta="100%p" 
        android:toXDelta="0%p"
        android:duration="500" />
</set>

out_to_left：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
        android:fromXDelta="0%p" 
        android:toXDelta="-100%p"
        android:duration="500" />
</set>

out_to_right：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
        android:fromXDelta="0%p" 
        android:toXDelta="100%p"
        android:duration="500" />
</set>

8、MainActivity還要設置android:theme="@android:style/Theme.Translucent.NoTitleBar"
源碼下載

Android仿百度貼吧看帖滑動返回效果

Android佈局使用詳解

Android中ScrollView使用詳解

Android知識點筆記

Android多渠道打包並替換部分信息

Android仿百度貼吧看帖滑動返回效果

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結