rezaeade

آموزش swiper

1 ارسال در این موضوع قرار دارد

دوستان اين اموزش بر اساس يه مثال هست که توي اينترنت پيدا کردم تمام اجزاء رو اينجا ميگم در اخر هم فايل مثال رو اپلود ميکنم

اموزش:

1-توي  اين اموزش ما سه بخش کلي داريم هدرو و منو ,صفحه اول ,صفحه دوم خوب پس اول سه تا فايل xmlدزست ميکنيم با نام هاي activity_one وactivity_two وactivity_menu 

2- فايلactivity_menu  رو باز ميکنيم ميخواي توي اين صفحه سه تا دکمه و يه هدر که داراي دکمه هست بسازيم خوب براي اين کار از کد زير استفاده کنيد(اگر خواستيد خودتون ميتونيد دکمه هاي بيشتر ي بسازيد)

[shcode=xml]

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent" 

android:layout_height="match_parent" >

        android:layout_width="match_parent" 

android:layout_height="match_parent"

android:layout_alignParentTop="true"

   android:layout_alignParentLeft="true"

   android:orientation="horizontal"

android:weightSum="1.0"

android:baselineAligned="false" >

   

   android:layout_width="0dp" 

       android:layout_height="wrap_content" 

       android:layout_weight=".80" >

       

           android:id="@+id/oneButton"

           android:layout_width="fill_parent"

       android:layout_height="wrap_content"

       android:layout_alignParentTop="true"

       android:layout_alignParentLeft="true"

       android:layout_marginTop="5dp"

       android:layout_marginLeft="5dp"

       android:layout_marginRight="5dp"

       android:text="@string/title_activity_one" />

       

           android:id="@+id/twoButton"

           android:layout_width="fill_parent"

       android:layout_height="wrap_content"

       android:layout_below="@+id/oneButton"

       android:layout_alignParentLeft="true"

       android:layout_marginLeft="5dp"

       android:layout_marginRight="5dp"

       android:text="@string/title_activity_two" />

       

           android:id="@+id/logoutButton"

           android:layout_width="fill_parent"

       android:layout_height="wrap_content"

       android:layout_below="@+id/twoButton"

       android:layout_alignParentLeft="true"

       android:layout_marginLeft="5dp"

       android:layout_marginRight="5dp"

       android:text="@string/exit" />

   

   

       android:layout_width="0dp" 

       android:layout_height="match_parent" 

       android:layout_weight=".20"

       android:background="#000000" />

   

   

        android:id="@+id/tabLayout"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

android:layout_alignParentTop="true"

   android:layout_alignParentLeft="true"

   android:background="#000000" >

       

       android:id="@+id/header"

       android:layout_width="match_parent"

       android:layout_height="45dp"

       android:layout_alignParentLeft="true"

       android:layout_alignParentTop="true"

       android:background="#FF212021" >

       

           android:id="@+id/menuButton"

           android:layout_alignParentTop="true"

           android:layout_alignParentLeft="true"

           android:layout_width="40dp"

           android:layout_height="40dp"

           android:layout_marginTop="8dp"

           android:layout_marginLeft="5dp"

           android:layout_marginBottom="2dp"

           android:src="@drawable/menu"

           android:contentDescription="@string/app_name" />

       

           android:id="@+id/headerTitle"

           android:layout_alignParentTop="true"

           android:layout_toRightOf="@+id/menuButton"

           android:layout_width="fill_parent"

           android:layout_height="wrap_content"

           android:layout_marginTop="12dp"

           android:layout_marginLeft="10dp"

           android:textColor="#FFFFFFFF"

       android:textSize="20dp"

       android:gravity="left" />

   

   

  android:id="@android:id/tabhost"

  android:layout_width="match_parent"

  android:layout_height="match_parent"

  android:layout_alignParentLeft="true"

  android:layout_below="@+id/header">

android:id="@android:id/tabs"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:visibility="gone" />

android:id="@android:id/tabcontent"

android:layout_width="match_parent"

android:layout_height="fill_parent" />

       android:id="@+id/contentOverlay"

       android:layout_width="match_parent"

       android:layout_height="match_parent"

       android:layout_alignParentLeft="true"

       android:layout_below="@+id/header"

       android:background="@android:color/transparent"

       android:visibility="gone" />

   

[/shcode]

2- به فايل activity_one بريد توي اين اموزش اومده بک گراند صفحه اول رو سبز کرده و وسط صفحه يک نوشته گزاشته کدش به صورت زير هستش

[shcode=xml]

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="#3CFF00" >

   

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_centerVertical="true"

        android:text="@string/hello_world_one"

        tools:context=".MainController" />

[/shcode]

3-به فايل activity_two اين صفحه هم مثل صفحه قبل هست فقط رنگش رو تغيير دادن

[shcode=xml]

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="#FFFC00" >

   

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_centerVertical="true"

        android:text="@string/hello_world_two"

        tools:context=".MainController" />

[/shcode]

4- توي اين مثل از انيمشين هم اسفاده شده یه پوشه به نام anim بسازید  

5- توی پوشه anim دوتا فایل xml با نام های view_to_left وview_to_right بسازید .

6- فایل view_to_left رو باز کنید وتوی اون کد زیر رو قرار بدید

[shcode=xml]

<?xml version="1.0" encoding="utf-8"?>

   

        android:duration="400"

        android:startOffset="0"

        android:interpolator="@android:anim/accelerate_decelerate_interpolator"

        android:fromXDelta="+80%p"

        android:toXDelta="0" />

[/shcode]

7-حالا فایل view_to_right رو باز کنید وکد زیر رو توش قرار بدید

[shcode=xml]

<?xml version="1.0" encoding="utf-8"?>

   

        android:duration="400"

        android:startOffset="0"

        android:interpolator="@android:anim/accelerate_decelerate_interpolator"

        android:toXDelta="+80%p" />

[/shcode]

8- خو حالا میریم سراغ ساخت فایل های جاوا . خوب ما به 5 تا فایل جاوا نیاز داریم پس 5 تا فایل جاوا با نام های HeaderGestureListener و MainController و MainControllerGestureEventListener و OneActivity و TwoActivity میسازیم

9-خوب اول فایل جاوا OneActivity رو باز میکنیم این فایل مربوط به صفحه اول ما میشه کد زیر رو توی این فایل قرار بدید

[shcode=java]

package com.mihaelisaev.swiper;

import android.app.Activity;

import android.os.Bundle;

public class OneActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_one);

}

@Override

public void onBackPressed() {

this.getParent().onBackPressed();

}

}

[/shcode]

10-حالا فایل  TwoActivity رو باز میکنیم این فایل هم مربوط به صفحه دوم مامیشه

[shcode=java]

package com.mihaelisaev.swiper;

import android.app.Activity;

import android.os.Bundle;

public class TwoActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_two);

}

@Override

public void onBackPressed() {

this.getParent().onBackPressed();

}

}[/shcode]

11- خوب حالا فایل  HeaderGestureListener رو باز میکنم این فایل هم مربوط به هدر ما میشه کد زیر رو توی این فایل قرار بدید

[shcode=java]

package com.mihaelisaev.swiper;

import android.view.MotionEvent;

import android.view.GestureDetector.OnGestureListener;

public class HeaderGestureListener implements OnGestureListener {    

    private MainControllerGestureEventListener gestureEventListener;

private static final int SWIPE_THRESHOLD = 100;

    private static final int SWIPE_VELOCITY_THRESHOLD = 100;

public HeaderGestureListener(MainControllerGestureEventListener gestureEventListener) {

this.gestureEventListener = gestureEventListener;

    }

    @Override

    public boolean onDown(MotionEvent e) {

        return true;

    }

    @Override

    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {

    boolean result = false;

        try {

            float diffY = e2.getY() - e1.getY();

            float diffX = e2.getX() - e1.getX();

            if (Math.abs(diffX) > Math.abs(diffY))

                if (Math.abs(diffX) > SWIPE_THRESHOLD && Math.abs(velocityX) > SWIPE_VELOCITY_THRESHOLD)

                    if (diffX > 0)

                        onSwipeRight();

                    else

                        onSwipeLeft();

            else

                if (Math.abs(diffY) > SWIPE_THRESHOLD && Math.abs(velocityY) > SWIPE_VELOCITY_THRESHOLD)

                    if (diffY > 0)

                        onSwipeBottom();

                    else

                        onSwipeTop();

        } catch (Exception exception) {

            exception.printStackTrace();

        }

        return result;

    }

    @Override

    public void onLongPress(MotionEvent e) {}

    @Override

    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {

    gestureEventListener.onScroll(e1.getX(), e1.getY(), e2.getX(), e2.getY(), distanceX, distanceY);

    return true;

    }

    @Override

    public void onShowPress(MotionEvent e) {}    

    @Override

    public boolean onSingleTapUp(MotionEvent e) {

    gestureEventListener.tapUp();

        return true;

    }

    public void onSwipeRight() {

    gestureEventListener.onSwipeRight();

    }

    public void onSwipeLeft() {

    gestureEventListener.onSwipeLeft();

    }

    public void onSwipeTop() {

    gestureEventListener.onSwipeTop();

    }

    public void onSwipeBottom() {

    gestureEventListener.onSwipeBottom();

    }

}

[/shcode]

12- خوب حالا فایل MainController رو باز کرده و کد زیر رو توش قرار بدید

[shcode=java]

package com.mihaelisaev.swiper;

import java.util.HashMap;

import java.util.Map;

import android.os.Bundle;

import android.app.TabActivity;

import android.content.Intent;

import android.util.DisplayMetrics;

import android.util.Log;

import android.view.GestureDetector;

import android.view.MotionEvent;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.View.OnTouchListener;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.view.animation.Animation.AnimationListener;

import android.widget.Button;

import android.widget.ImageView;

import android.widget.RelativeLayout;

import android.widget.TabHost;

import android.widget.TabHost.OnTabChangeListener;

import android.widget.TextView;

@SuppressWarnings("deprecation")

public class MainController extends TabActivity {

String TAG = getClass().getName();

private float MENU_WIDTH = .8f;

private TabHost tabHost;

Button oneButton;

Button twoButton;

Button exitButton;

private RelativeLayout header;

private RelativeLayout content;

private RelativeLayout contentViewOverlay;

private TextView headerTitle;

private MainControllerGestureEventListener gestureEventListenerHeaderView;

private MainControllerGestureEventListener gestureEventListenerMenuButton;

private GestureDetector gestureScannerHeaderView;

private GestureDetector gestureScannerBackButton;

Map mapActivityTitles;

@Override

    public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_menu);

        tabHost = getTabHost();

        setup();

        addActivities();

}

private void addActivities() {

createActivity(OneActivity.class, getString(R.string.title_activity_one));

createActivity(TwoActivity.class, getString(R.string.title_activity_two));

tabHost.setCurrentTabByTag(OneActivity.class.toString());

headerTitle.setText(mapActivityTitles.get(OneActivity.class.toString()));

}

private void createActivity(Class<?> cls, String title) {

TabHost.TabSpec tabSpec;

        tabSpec = tabHost.newTabSpec(cls.toString());

        tabSpec.setIndicator("");

        tabSpec.setContent(new Intent(this, cls));

        tabHost.addTab(tabSpec);

        mapActivityTitles.put(cls.toString(), title);

}

private void setup() {

header = (RelativeLayout)findViewById(R.id.header);

content = (RelativeLayout)findViewById(R.id.tabLayout);

contentViewOverlay = (RelativeLayout)findViewById(R.id.contentOverlay);

headerTitle = (TextView)findViewById(R.id.headerTitle);

mapActivityTitles = new HashMap();

createGestureEventListener();

bindHeaderView();

bindBackButton();

bindContentViewOverlayOnTouchWhenMenuOpened();

bindButtons();

tabHost.setOnTabChangedListener(new OnTabChangeListener()

{

   @Override

   public void onTabChanged(String className) {

    try{

    final View tabContent = tabHost.findViewById(android.R.id.tabcontent);

    if(tabContent!=null){

    Animation fadeIn = AnimationUtils.loadAnimation(getBaseContext(), android.R.anim.fade_in);

       tabContent.startAnimation(fadeIn);

       headerTitle.startAnimation(fadeIn);

    }

    }catch(Exception e){

    Log.d(TAG, "onTabChanged exception: "+e.toString());

    }

   }

});

}

private void createGestureEventListener() {

gestureEventListenerHeaderView = new MainControllerGestureEventListener() {

@Override

public void onSwipeRight() {

if(!isMenuOpened())

openMenu();

}

@Override

public void onSwipeLeft() {

if(isMenuOpened())

closeMenu();

}

@Override

public void onSwipeTop() {}

@Override

public void onSwipeBottom() {}

@Override

public void tapUp() {}

@Override

public void onScroll(float fromX, float fromY, float toX, float toY, float movedInX, float movedInY) {}

};

gestureScannerHeaderView = new GestureDetector(getApplicationContext(),

new HeaderGestureListener(gestureEventListenerHeaderView));

gestureEventListenerMenuButton = new MainControllerGestureEventListener() {

@Override

public void onSwipeRight() {

if(!isMenuOpened())

openMenu();

}

@Override

public void onSwipeLeft() {

if(isMenuOpened())

closeMenu();

}

@Override

public void onSwipeTop() {}

@Override

public void onSwipeBottom() {}

@Override

public void tapUp() {

if(isMenuOpened())

closeMenu();

else

openMenu();

}

@Override

public void onScroll(float fromX, float fromY, float toX, float toY, float movedInX, float movedInY) {}

};

gestureScannerBackButton = new GestureDetector(getApplicationContext(), new HeaderGestureListener(gestureEventListenerMenuButton));

}

private void bindHeaderView() {

header.setOnTouchListener(new OnTouchListener() {

@Override

public boolean onTouch(View v, MotionEvent event) {

return gestureScannerHeaderView.onTouchEvent(event);

}

});

}

private void manuallySetActivityLeftMargin(int left) {

RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams

(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.FILL_PARENT);

        params = (RelativeLayout.LayoutParams)content.getLayoutParams();

        params.setMargins(left,0,(left*(-1)),0);

        content.setLayoutParams(params);

}

public boolean isMenuOpened() {

return (((RelativeLayout.LayoutParams)content.getLayoutParams()).leftMargin==0) ? false:true;

}

private void bindBackButton() {

ImageView menuButton = (ImageView)header.findViewById(R.id.menuButton);

menuButton.setOnTouchListener(new OnTouchListener() {

@Override

public boolean onTouch(View v, MotionEvent event) {

return gestureScannerBackButton.onTouchEvent(event);

}

});

}

private void bindContentViewOverlayOnTouchWhenMenuOpened() {

contentViewOverlay.setOnTouchListener(new OnTouchListener() {

@Override

public boolean onTouch(View v, MotionEvent event) {

if(isMenuOpened()){

closeMenu();

return false;

}else

return true;

}

});

}

public void openMenu() {

contentViewOverlay.setVisibility(View.VISIBLE);

Animation moveRight = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.view_to_right);

moveRight.setAnimationListener(

       new AnimationListener() {

           @Override

           public void onAnimationStart(Animation animation) {}

           @Override

           public void onAnimationRepeat(Animation animation) {}

           @Override

           public void onAnimationEnd(Animation animation) {

            content.clearAnimation();

            manuallySetActivityLeftMargin((int)(getWindowWidth()*MENU_WIDTH));

           }

       }

   );

content.startAnimation(moveRight);

}

public int getWindowWidth() {

DisplayMetrics metrics = new DisplayMetrics();

    getWindowManager().getDefaultDisplay().getMetrics(metrics);

    return metrics.widthPixels;

}

public void closeMenu() {

contentViewOverlay.setVisibility(View.GONE);

Animation moveLeft = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.view_to_left);

manuallySetActivityLeftMargin(0);

moveLeft.setAnimationListener(

       new AnimationListener() {

           @Override

           public void onAnimationStart(Animation animation) {}

           @Override

           public void onAnimationRepeat(Animation animation) {}

           @Override

           public void onAnimationEnd(Animation animation) {

            content.clearAnimation();

           }

       }

   );

content.startAnimation(moveLeft);

}

private void bindButtons() {

oneButton = (Button)findViewById(R.id.oneButton);

twoButton = (Button)findViewById(R.id.twoButton);

exitButton = (Button)findViewById(R.id.logoutButton);

oneButton.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

closeMenuAndStartIntent(OneActivity.class.toString());

}

});

twoButton.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

closeMenuAndStartIntent(TwoActivity.class.toString());

}

});

exitButton.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

finish();

}

});

}

private void startIntent(final String tag) {

final View tabContent = tabHost.findViewById(android.R.id.tabcontent);

    if( tabContent != null ){

    Animation fadeOut = AnimationUtils.loadAnimation(getBaseContext(), android.R.anim.fade_out);

    tabContent.startAnimation(fadeOut);

    headerTitle.startAnimation(fadeOut);

    }

    tabHost.setCurrentTabByTag(tag);

    headerTitle.setText(mapActivityTitles.get(tag));

}

private void closeMenuAndStartIntent(String tag) {

closeMenu();

if(!tabHost.getCurrentTabTag().equals(tag))

startIntent(tag);

}

@Override

public void onBackPressed() {

if(isMenuOpened())

closeMenu();

else

super.onBackPressed();

}

}

[/shcode]

13- خوب فایل MainControllerGestureEventListener رو هم باز کنید کد زیر رو توش قرار بدید

[shcode=java]

package com.mihaelisaev.swiper;

import java.util.EventListener;

public interface MainControllerGestureEventListener extends EventListener {

public void onSwipeRight();

public void onSwipeLeft();

public void onSwipeTop();

public void onSwipeBottom();

public void tapUp();

public void onScroll(float fromX, float fromY, float toX, float toY, float movedInX, float movedInY);

}[/shcode]

15-این هم اخرین مرحلس فایل منفیس خودتون رو باز کنید و کد زیر رو توش قرار بدید

[shcode=xml]

    package="com.mihaelisaev.swiper"

    android:versionCode="1"

    android:versionName="1.0" >

   

        android:minSdkVersion="8"

        android:targetSdkVersion="15" />

   

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@style/AppTheme" >

       

            android:name=".MainController"

            android:label="@string/app_name" >

           

               

               

           

       

       

       

   

[/shcode]

این هم چنتا اسکرین شات از برنامه(میتونید تمام کد های رو از پیوست دانلود کنید)

do.php?img=206do.php?img=205

Swiper-master.zip

Swiper-master.zip

به اشتراک گذاری این پست


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری