[セットトップ]Android仿UCブラウザ左右上下スクロール機能(ソースコード付)
13270 ワード
林炳文エヴァンカカのオリジナル作品.転載は出典を明記してくださいhttp://blog.csdn.net/evankaka
本稿では,サイドスライドメニューの右側にテキストボックスを付け,テキストの上下スライドとメニューの左右スクロールを実現する.ここではandroidのタッチイベントの配布メカニズムをよく見ることをお勧めします.ここでは詳しく説明しません.私はこのアプリケーションだけを話します.実現する機能は、UCブラウザ(または他の携帯電話ブラウザ)の左右スクロール、Webページの切り替え、上下スクロール、コンテンツのドラッグのようなものです.
目次:
一、機能要求と実現
二、レイアウトとコード
三、原理と説明
本文の効果:(ソースコードは無料でダウンロードします)
一、機能要求と実現
1、機能要求:
(1)指が最初に画面を押して左右に移動すると、メニューを左右にスクロールするしかなく、このとき指を押し続けて上下に移動すると、メニュー表示部分は変わらないが、テキストボックスも上下に移動しない!
(2)指が最初に画面を押して上下に移動すると、テキストボックスを上下にスクロールするしかなく、このとき指がずっと押していて、しかも左右に移動していると、テキストボックス表示部分は変わらないが、メニューも左右に移動しない!
2、初歩的な実現:
前編では、左のメニュー項目にlistviewを追加し、右のコンテンツ項目にtextviewを追加し、上下スクロール機能を実現するためにtextviewにscrollviewを追加しました.
この効果は間違いないに違いありません.ほら、私たちの指が上下にテキストを移動したとき、左右に移動したら、メニューも表示されます.
3、修正実現
ここでは、ScrolViewのタッチイベントをLinearLayoutに登録しているので、タッチイベントの配布から始めたいと思います.(LinearLayoutにはScrolViewが含まれていて、下のレイアウトがわかりません)に行くので、タッチイベントは先にLinearLayoutに渡されます.
次の2つのケースに分けられます.
(1)指を左右に動かすと,タッチイベントをLinearLayoutに伝える.関数onTouchはtrueを返し、タッチイベントが伝わらないとScrollViewが動かないことを示します.
(2)指の上下移動であれば,タッチイベントは先にLinearLayoutに渡されるが,LinearLayoutは何の処理もせず,直接ScrollView,ScrollViewに渡されてタッチイベントを処理する.
これは修正後の効果です.
二、レイアウトとコード
1、レイアウト
2、コード
三、原理と説明
原理:
1、ScrollViewのタッチイベントをLinearLayoutに登録する.(LinearLayoutにはScrolViewが含まれていてレイアウトがわかりません)
2、まずジェスチャーが左右に動くか上下に動くかを判断し、左右に動くとLinearLayoutはタッチイベント、すなわち関数OnTouchがtrueに戻る.上下運動をしたい場合、関数OnTouchはfalseを返します.
ここで注意したいのは、ジェスチャーで判断するのは一度だけですが、どういう意味ですか?つまり、あなたが1回目に押して、あなたがずっと押しているまで、この中であなたのジェスチャーがしたい運動を1回だけ判断します.
3、指が画面から離れてから、すべてのパラメータを復元します.
(ソース無料ダウンロード)
林炳文エヴァンカカのオリジナル作品.転載は出典を明記してくださいhttp://blog.csdn.net/evankaka
本稿では,サイドスライドメニューの右側にテキストボックスを付け,テキストの上下スライドとメニューの左右スクロールを実現する.ここではandroidのタッチイベントの配布メカニズムをよく見ることをお勧めします.ここでは詳しく説明しません.私はこのアプリケーションだけを話します.実現する機能は、UCブラウザ(または他の携帯電話ブラウザ)の左右スクロール、Webページの切り替え、上下スクロール、コンテンツのドラッグのようなものです.
目次:
一、機能要求と実現
二、レイアウトとコード
三、原理と説明
本文の効果:(ソースコードは無料でダウンロードします)
一、機能要求と実現
1、機能要求:
(1)指が最初に画面を押して左右に移動すると、メニューを左右にスクロールするしかなく、このとき指を押し続けて上下に移動すると、メニュー表示部分は変わらないが、テキストボックスも上下に移動しない!
(2)指が最初に画面を押して上下に移動すると、テキストボックスを上下にスクロールするしかなく、このとき指がずっと押していて、しかも左右に移動していると、テキストボックス表示部分は変わらないが、メニューも左右に移動しない!
2、初歩的な実現:
前編では、左のメニュー項目にlistviewを追加し、右のコンテンツ項目にtextviewを追加し、上下スクロール機能を実現するためにtextviewにscrollviewを追加しました.
この効果は間違いないに違いありません.ほら、私たちの指が上下にテキストを移動したとき、左右に移動したら、メニューも表示されます.
3、修正実現
ここでは、ScrolViewのタッチイベントをLinearLayoutに登録しているので、タッチイベントの配布から始めたいと思います.(LinearLayoutにはScrolViewが含まれていて、下のレイアウトがわかりません)に行くので、タッチイベントは先にLinearLayoutに渡されます.
次の2つのケースに分けられます.
(1)指を左右に動かすと,タッチイベントをLinearLayoutに伝える.関数onTouchはtrueを返し、タッチイベントが伝わらないとScrollViewが動かないことを示します.
(2)指の上下移動であれば,タッチイベントは先にLinearLayoutに渡されるが,LinearLayoutは何の処理もせず,直接ScrollView,ScrollViewに渡されてタッチイベントを処理する.
これは修正後の効果です.
二、レイアウトとコード
1、レイアウト
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context=".MainActivity" >
<LinearLayout
android:id="@+id/menu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@drawable/menu" >
<!-- ListView -->
<ListView
android:id="@+id/menuList"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
<LinearLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:id="@+id/scrollview"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView android:id="@+id/content_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/text1"
android:textSize="22px" />
</ScrollView>
</LinearLayout>
</LinearLayout>2、コード
/**
* @
* @ 2015.2.17
*/
package com.example.learningjava;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
import com.example.learningjava.R.string;
import android.R.integer;
import android.R.menu;
import android.os.AsyncTask;
import android.os.Build;
import android.os.Bundle;
import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.LinearLayout.LayoutParams;
import android.widget.ListView;
import android.widget.ScrollView;
import android.widget.Toast;
import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.GestureDetector;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.Window;
import android.widget.LinearLayout;
public class MainActivity extends Activity implements OnTouchListener{
private LinearLayout menuLayout;//
private LinearLayout contentLayout;//
private LayoutParams menuParams;//
private LayoutParams contentParams;// contentLayout
private int disPlayWidth;//
private float xDown;//
private float xMove;//
private float xUp;//
private float yDown;//
private float yMove;//
private VelocityTracker mVelocityTracker; // 。
private float velocityX;//
public static final int SNAP_VELOCITY = 400; // menu ， 。
private boolean menuIsShow = false;//
private static final int menuPadding=160;//menu ， content
private ListView menuListView;//
private ScrollView scrollView;//
private boolean wantToScrollText=false;//
private boolean wantToScrollTextMenu=false;
private boolean oneFucction=false;//
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initLayoutParams();
initMenuList();
initScrollView();
}
/**
* Layout
*/
private void initLayoutParams()
{
//
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
disPlayWidth =dm.widthPixels;
//
menuLayout = (LinearLayout) findViewById(R.id.menu);
contentLayout = (LinearLayout) findViewById(R.id.content);
findViewById(R.id.layout).setOnTouchListener(this);
//
menuParams=(LinearLayout.LayoutParams)menuLayout.getLayoutParams();
contentParams = (LinearLayout.LayoutParams) contentLayout.getLayoutParams();
//
menuParams.width = disPlayWidth - menuPadding;
menuParams.leftMargin = 0 - menuParams.width;
contentParams.width = disPlayWidth;
contentParams.leftMargin=0;
//
menuLayout.setLayoutParams(menuParams);
contentLayout.setLayoutParams(contentParams);
}
/**
*
*/
private void initMenuList()
{
final String[] strs = new String[] { " 1 Java ", " 2 ", " 3 ", " 4 ", " 5 （ ）"};
menuListView = (ListView) findViewById(R.id.menuList);
menuListView.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, strs));// ListView
//
menuListView.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,long arg3) {
Toast.makeText(getApplicationContext()," " + strs[arg2], Toast.LENGTH_SHORT).show();
}
});
}
/**
* scrollView
*/
public void initScrollView(){
scrollView = (ScrollView)this.findViewById(R.id.scrollview);
scrollView.setOnTouchListener(this);// View， View 。 ， ，
}
@Override
public boolean onTouch(View v, MotionEvent event)
{
acquireVelocityTracker(event);
if (event.getAction()==MotionEvent.ACTION_DOWN)
{
xDown=event.getRawX();
yDown=event.getRawY();
return false;
}
else if(event.getAction()==MotionEvent.ACTION_MOVE)
{
if(wantToScrollText)//
return false;
xMove=event.getRawX();
yMove=event.getRawY();
if(menuIsShow){
isScrollToShowMenu();
return true;
}
if(!oneFucction)
{
oneFucction=true;
// if
if(Math.abs(xDown-xMove)<Math.abs(yDown-yMove))
{
wantToScrollText=true;
return false;
}
}
isScrollToShowMenu();
}
else if(event.getAction()==MotionEvent.ACTION_UP)
{
oneFucction=false;
if(wantToScrollText){
wantToScrollText=false;
return false;
}
xUp=event.getRawX();
isShowMenu();
releaseVelocityTracker();
}
else if (event.getAction()==MotionEvent.ACTION_CANCEL)
{
releaseVelocityTracker();
return false;
}
return true;//false scroll
}
/**
* ，
*/
private void isScrollToShowMenu()
{
int distanceX = (int) (xMove - xDown);
if (!menuIsShow) {
scrollToShowMenu(distanceX);
}else{
scrollToHideMenu(distanceX);
}
}
/**
*
*/
private void isShowMenu()
{
velocityX =getScrollVelocity();
if(wantToShowMenu()){
if(shouldShowMenu()){
showMenu();
}else{
hideMenu();
}
}
else if(wantToHideMenu()){
if(shouldHideMenu()){
hideMenu();
}else{
showMenu();
}
}
}
/**
* , 0
*/
private boolean wantToShowMenu(){
return !menuIsShow&&xUp-xDown>0;
}
/**
* , 0
*/
private boolean wantToHideMenu(){
return menuIsShow&&xDown-xUp>0;
}
/**
* ,
*/
private boolean shouldShowMenu(){
return xUp-xDown>menuParams.width/2||velocityX>SNAP_VELOCITY;
}
/**
* ,
*/
private boolean shouldHideMenu(){
return xDown-xUp>menuParams.width/2||velocityX>SNAP_VELOCITY;
}
/**
*
*/
private void showMenu()
{
new showMenuAsyncTask().execute(50);
menuIsShow=true;
}
/**
*
*/
private void hideMenu()
{
new showMenuAsyncTask().execute(-50);
menuIsShow=false;
}
/**
* ，
*@param scrollX
*/
private void scrollToShowMenu(int scrollX)
{
if(scrollX>0&&scrollX<= menuParams.width)
menuParams.leftMargin =-menuParams.width+scrollX;
menuLayout.setLayoutParams(menuParams);
}
/**
* ，
*@param scrollX
*/
private void scrollToHideMenu(int scrollX)
{
if(scrollX>=-menuParams.width&&scrollX<0)
menuParams.leftMargin=scrollX;
menuLayout.setLayoutParams(menuParams);
}
/**
* VelocityTracker ， content VelocityTracker 。
* @param event VelocityTracker MotionEvent
*/
private void acquireVelocityTracker(final MotionEvent event) {
if(null == mVelocityTracker) {
mVelocityTracker = VelocityTracker.obtain();
}
mVelocityTracker.addMovement(event);
}
/**
* content 。
* @return ， 。
*/
private int getScrollVelocity() {
mVelocityTracker.computeCurrentVelocity(1000);
int velocity = (int) mVelocityTracker.getXVelocity();
return Math.abs(velocity);
}
/**
* VelocityTracker
*/
private void releaseVelocityTracker() {
if(null != mVelocityTracker) {
mVelocityTracker.clear();
mVelocityTracker.recycle();
mVelocityTracker = null;
}
}
/**
*
*： ，
*
*/
class showMenuAsyncTask extends AsyncTask<Integer, Integer, Integer>
{
@Override
protected Integer doInBackground(Integer... params)
{
int leftMargin = menuParams.leftMargin;
while (true)
{// ， ， 。
leftMargin += params[0];
if (params[0] > 0 && leftMargin > 0)
{
leftMargin= 0;
break;
} else if (params[0] < 0 && leftMargin <-menuParams.width)
{
leftMargin=-menuParams.width;
break;
}
publishProgress(leftMargin);
try
{
Thread.sleep(40);// ，
} catch (InterruptedException e)
{
e.printStackTrace();
}
}
return leftMargin;
}
@Override
protected void onProgressUpdate(Integer... value)
{
menuParams.leftMargin = value[0];
menuLayout.setLayoutParams(menuParams);
}
@Override
protected void onPostExecute(Integer result)
{
menuParams.leftMargin = result;
menuLayout.setLayoutParams(menuParams);
}
}
}
三、原理と説明
原理:
1、ScrollViewのタッチイベントをLinearLayoutに登録する.(LinearLayoutにはScrolViewが含まれていてレイアウトがわかりません)
2、まずジェスチャーが左右に動くか上下に動くかを判断し、左右に動くとLinearLayoutはタッチイベント、すなわち関数OnTouchがtrueに戻る.上下運動をしたい場合、関数OnTouchはfalseを返します.
ここで注意したいのは、ジェスチャーで判断するのは一度だけですが、どういう意味ですか?つまり、あなたが1回目に押して、あなたがずっと押しているまで、この中であなたのジェスチャーがしたい運動を1回だけ判断します.
3、指が画面から離れてから、すべてのパラメータを復元します.
(ソース無料ダウンロード)
林炳文エヴァンカカのオリジナル作品.転載は出典を明記してくださいhttp://blog.csdn.net/evankaka