android介绍滑动条示例

本文概述

  • Android Introduction Slider示例
实施欢迎滑块屏幕是一个好主意,该屏幕介绍了应用程序的主要功能。在此滑块中,可以对应用程序进行简要介绍,用户可以在启动应用程序之前在其中滑动这些滑块(MainActivity或主页)。
Android Introduction Slider示例在此示例中,我们将使用SharedPreferences类,该类用于保持应用程序是否首次启动的状态。如果该应用程序是首次启动,则它将在启动该应用程序之前显示滑块,否则将启动MainActivity。
【android介绍滑动条示例】使用以下代码(你的UI)在布局目录中创建一个activity_main.xml文件。
activity_main.xml
< ?xml version="1.0" encoding="utf-8"?> < android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/bg_mainactivity" tools:context="example.srcmini.com.introonetimefirsttime.MainActivity">< TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="8dp" android:layout_marginStart="8dp" android:layout_marginTop="176dp" android:textSize="18dp" android:text="This is your MainActivity or Home Page" android:textColor="@android:color/white" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.503" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />< Button android:id="@+id/btn_click" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="96dp" android:layout_marginEnd="8dp" android:layout_marginStart="8dp" android:text="Button" android:onClick="btn_Click" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.501" app:layout_constraintStart_toStartOf="parent" />< /android.support.constraint.ConstraintLayout>

创建一个activity_welcome.xml文件并添加以下代码。用于滑块的布局。
activity_welcome.xml
< ?xml version="1.0" encoding="utf-8"?> < RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:showIn="@layout/activity_welcome">< android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent" />< LinearLayout android:id="@+id/layoutDots" android:layout_width="match_parent" android:layout_height="@dimen/dots_height" android:layout_alignParentBottom="true" android:layout_marginBottom="@dimen/dots_margin_bottom" android:gravity="center" android:orientation="horizontal">< /LinearLayout>< View android:layout_width="match_parent" android:layout_height="1dp" android:alpha=".5" android:layout_above="@id/layoutDots" android:background="@android:color/white" />< Button android:id="@+id/btn_next" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:background="@null" android:text="@string/next" android:textColor="@android:color/white" />< Button android:id="@+id/btn_skip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:background="@null" android:text="@string/skip" android:textColor="@android:color/white" />< /RelativeLayout>

现在,在布局目录中为welcome滑块创建布局,如welcome_slide1.xml和welcome_slide2.xml。
welcome_slide1.xml
< ?xml version="1.0" encoding="utf-8"?> < RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/bg_screen1">< LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:gravity="center_horizontal" android:orientation="vertical">< ImageView android:layout_width="@dimen/img_width_height" android:layout_height="@dimen/img_width_height" android:src="http://www.srcmini.com/@drawable/jtp_logo" />< TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/slide_1_title" android:textColor="@android:color/white" android:textSize="@dimen/slide_title" android:textStyle="bold" />< TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:paddingLeft="@dimen/desc_padding" android:paddingRight="@dimen/desc_padding" android:text="@string/slide_1_desc" android:textAlignment="center" android:textColor="@android:color/white" android:textSize="@dimen/slide_desc" />< /LinearLayout> < /RelativeLayout>

welcome_slide2.xml
< ?xml version="1.0" encoding="utf-8"?> < RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/bg_screen2"> < LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:gravity="center_horizontal" android:orientation="vertical">< ImageView android:layout_width="@dimen/img_width_height" android:layout_height="@dimen/img_width_height" android:src="http://www.srcmini.com/@drawable/image" />< TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/slide_2_title" android:textColor="@android:color/white" android:textSize="@dimen/slide_title" android:textStyle="bold" />< TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:paddingLeft="@dimen/desc_padding" android:paddingRight="@dimen/desc_padding" android:text="@string/slide_2_desc" android:textAlignment="center" android:textColor="@android:color/white" android:textSize="@dimen/slide_desc" />< /LinearLayout>< /RelativeLayout>

colors.xml
< ?xml version="1.0" encoding="utf-8"?> < resources> < color name="colorPrimary">#3F51B5< /color> < color name="colorPrimaryDark">#303F9F< /color> < color name="colorAccent">#FF4081< /color> < color name="bg_mainactivity">#d4e6e3< /color> < !-- Screens background color--> < color name="bg_screen1">#16c266< /color> < color name="bg_screen2">#90c2bb< /color>< !-- dots inactive colors --> < color name="dot_dark_screen1">#39d1ba< /color> < color name="dot_dark_screen2">#14a895< /color>< !-- dots active colors --> < color name="dot_light_screen1">#8de7f9< /color> < color name="dot_light_screen2">#8cf9eb< /color>< array name="array_dot_active"> < item>@color/dot_light_screen1< /item> < item>@color/dot_light_screen2< /item> < /array>< array name="array_dot_inactive"> < item>@color/dot_dark_screen1< /item> < item>@color/dot_dark_screen2< /item> < /array> < /resources>

strings.xml
< resources> < string name="app_name">IntroOneTimeFirstTime< /string>< string name="next">NEXT< /string> < string name="skip">SKIP< /string> < string name="start">GOT IT< /string>< string name="slide_1_title">Welcome to srcmini!< /string> < string name="slide_1_desc">srcmini is passionate to offer better technical content to the world.< /string>< string name="slide_2_title">Android< /string> < string name="slide_2_desc">Android is a mobile operating system developed by Google.< /string>< /resources>

dimens.xml
< ?xml version="1.0" encoding="utf-8"?> < resources> < !-- Default screen margins, per the Android Design guidelines. --> < dimen name="activity_horizontal_margin">16dp< /dimen> < dimen name="activity_vertical_margin">16dp< /dimen> < dimen name="fab_margin">16dp< /dimen> < dimen name="dots_height">30dp< /dimen> < dimen name="dots_margin_bottom">20dp< /dimen> < dimen name="img_width_height">120dp< /dimen> < dimen name="slide_title">30dp< /dimen> < dimen name="slide_desc">16dp< /dimen> < dimen name="desc_padding">40dp< /dimen>< /resources>

创建一个PrefManager.java类,并添加以下代码。在该类中,我们使用SharedPreferences类,如果首次启动该应用程序,则该类保持首选项名称和布尔状态为true。
PrefManager.java
package example.srcmini.com.introonetimefirsttime; import android.content.Context; import android.content.SharedPreferences; public class PrefManager { SharedPreferences pref; SharedPreferences.Editor editor; Context _context; // shared pref mode int PRIVATE_MODE = 0; // Shared preferences file name private static final String PREF_NAME = "welcome"; private static final String IS_FIRST_TIME_LAUNCH = "IsFirstTimeLaunch"; public PrefManager(Context context) { this._context = context; pref = _context.getSharedPreferences(PREF_NAME, PRIVATE_MODE); editor = pref.edit(); }public void setFirstTimeLaunch(boolean isFirstTime) { editor.putBoolean(IS_FIRST_TIME_LAUNCH, isFirstTime); editor.commit(); }public boolean isFirstTimeLaunch() { return pref.getBoolean(IS_FIRST_TIME_LAUNCH, true); } }

在WelcomeActivity.java类文件中,添加以下代码。
在本课程中,我们将执行以下任务:
  • 使用prefManager.isFirstTimeLaunch()方法检查应用程序的首次启动,如果返回true,则将启动文件MainActivity.java。
  • 使用“跳过”和“下一步”按钮添加滑块。
WelcomeActivity.java
package example.srcmini.com.introonetimefirsttime; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.content.Context; import android.content.Intent; import android.graphics.Color; import android.os.Build; import android.support.v4.view.PagerAdapter; import android.text.Html; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.view.Window; import android.view.WindowManager; import android.widget.Button; import android.widget.LinearLayout; import android.widget.TextView; public class WelcomeActivity extends AppCompatActivity {private ViewPager viewPager; private MyViewPagerAdapter myViewPagerAdapter; private LinearLayout dotsLayout; private TextView[] dots; private int[] layouts; private Button btnSkip, btnNext; private PrefManager prefManager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Checking for first time launch - before calling setContentView() prefManager = new PrefManager(this); if (!prefManager.isFirstTimeLaunch()) { launchHomeScreen(); finish(); }// Making notification bar transparent if (Build.VERSION.SDK_INT >= 21) { getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN); }setContentView(R.layout.activity_welcome); viewPager = (ViewPager) findViewById(R.id.view_pager); dotsLayout = (LinearLayout) findViewById(R.id.layoutDots); btnSkip = (Button) findViewById(R.id.btn_skip); btnNext = (Button) findViewById(R.id.btn_next); // layouts of welcome sliders layouts = new int[]{ R.layout.welcome_slide1, R.layout.welcome_slide2 }; // adding bottom dots addBottomDots(0); // making notification bar transparent changeStatusBarColor(); myViewPagerAdapter = new MyViewPagerAdapter(); viewPager.setAdapter(myViewPagerAdapter); viewPager.addOnPageChangeListener(viewPagerPageChangeListener); btnSkip.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { launchHomeScreen(); } }); btnNext.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // checking for last page if true launch MainActivity int current = getItem(+1); if (current < layouts.length) { // move to next screen viewPager.setCurrentItem(current); } else { launchHomeScreen(); } } }); }private void addBottomDots(int currentPage) { dots = new TextView[layouts.length]; int[] colorsActive = getResources().getIntArray(R.array.array_dot_active); int[] colorsInactive = getResources().getIntArray(R.array.array_dot_inactive); dotsLayout.removeAllViews(); for (int i = 0; i < dots.length; i++) { dots[i] = new TextView(this); dots[i].setText(Html.fromHtml("?")); dots[i].setTextSize(35); dots[i].setTextColor(colorsInactive[currentPage]); dotsLayout.addView(dots[i]); }if (dots.length > 0) dots[currentPage].setTextColor(colorsActive[currentPage]); }private int getItem(int i) { return viewPager.getCurrentItem() + i; }private void launchHomeScreen() { prefManager.setFirstTimeLaunch(false); startActivity(new Intent(WelcomeActivity.this, MainActivity.class)); finish(); }//viewpager change listener ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() {@Override public void onPageSelected(int position) { addBottomDots(position); // changing the next button text 'NEXT' / 'GOT IT' if (position == layouts.length - 1) { // last page. make button text to GOT IT btnNext.setText(getString(R.string.start)); btnSkip.setVisibility(View.GONE); } else { // still pages are left btnNext.setText(getString(R.string.next)); btnSkip.setVisibility(View.VISIBLE); } }@Override public void onPageScrolled(int arg0, float arg1, int arg2) {}@Override public void onPageScrollStateChanged(int arg0) {} }; // Making notification bar transparentprivate void changeStatusBarColor() { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { Window window = getWindow(); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); window.setStatusBarColor(Color.TRANSPARENT); } }/** * View pager adapter */ public class MyViewPagerAdapter extends PagerAdapter { private LayoutInflater layoutInflater; public MyViewPagerAdapter() { }@Override public Object instantiateItem(ViewGroup container, int position) { layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE); View view = layoutInflater.inflate(layouts[position], container, false); container.addView(view); return view; }@Override public int getCount() { return layouts.length; }@Override public boolean isViewFromObject(View view, Object obj) { return view == obj; }@Override public void destroyItem(ViewGroup container, int position, Object object) { View view = (View) object; container.removeView(view); } } }

在MainActivity.java类中,添加以下代码。此类检查SharedPreferences返回的状态。
MainActivity.java
package example.srcmini.com.introonetimefirsttime; import android.content.Intent; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Toast; public class MainActivity extends AppCompatActivity {@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); PrefManager prefManager = new PrefManager(getApplicationContext()); if(prefManager.isFirstTimeLaunch()){ prefManager.setFirstTimeLaunch(false); startActivity(new Intent(MainActivity.this, WelcomeActivity.class)); finish(); } } protected void btn_Click(View view){ Toast.makeText(MainActivity.this, "clicked on button", Toast.LENGTH_LONG).show(); } }

AndroidMenifest.java
< ?xml version="1.0" encoding="utf-8"?> < manifest xmlns:android="http://schemas.android.com/apk/res/android" package="example.srcmini.com.introonetimefirsttime">< application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme">< activity android:name=".WelcomeActivity"> < intent-filter> < action android:name="android.intent.action.MAIN" />< category android:name="android.intent.category.LAUNCHER" /> < /intent-filter> < /activity> < activity android:name=".MainActivity"/> < /application>< /manifest>

输出:
android介绍滑动条示例

文章图片
android介绍滑动条示例

文章图片
android介绍滑动条示例

文章图片
android介绍滑动条示例

文章图片

    推荐阅读