第一步：在activity_main里面添加android.support.design.widget.TabLayout 和 android.support.v4.view.ViewPager，直接附上源码如下：
<?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:context="com.terawins.www.t613_ui_tool.MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
app:tabGravity="center"
app:tabMode="fixed"
app:tabIndicatorHeight="0dp"
app:tabSelectedTextColor="@android:color/holo_red_light"
>
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/tab_layout_container">
</android.support.v4.view.ViewPager>
</RelativeLayout>
第二步：因为使用support库中的相关东西，需要配置相应的库。我配置的是
com.android.support:design:26.1.0（备注：因为我使用的sdk版本就是26的，所以... ）,下面附上我的app目录下的build.gradle内容：apply plugin: 'com.android.application'
android {
compileSdkVersion 26
defaultConfig {
applicationId "com.terawins.www.t613_ui_tool"
minSdkVersion 15
targetSdkVersion 26
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:26.1.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.1'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
implementation 'com.android.support:design:26.1.0'
}
第三步：在src/main/res/layout目录下，新建几个你需要的标签页。这里我给出，我自己需要使用2个标签页，仅供参考。
fragment_device_connect.xml，源码如下：
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:id="@+id/layout_communication"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/lab_communicationMode"
android:text="通信方式:"
android:layout_marginTop="8dp"
/>
<RadioGroup
android:id="@+id/rg_communication"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="@+id/lab_communicationMode"
android:layout_toRightOf="@+id/lab_communicationMode"
android:orientation="horizontal"
android:layout_marginLeft="10dp"
>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/rb_uart"
android:text="UART"
android:checked="true"
/>
<RadioButton
android:layout_marginLeft="40dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/rb_i2c"
android:text="I2C"
/>
</RadioGroup>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/lab_devPath"
android:text="设备路径:"
android:layout_marginTop="10dp"
android:layout_below="@+id/lab_communicationMode"
/>
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/spin_devPath"
android:layout_alignBaseline="@+id/lab_devPath"
android:layout_toRightOf="@+id/lab_devPath"
android:layout_toEndOf="@+id/lab_devPath"
android:layout_marginLeft="10dp"
android:entries="@array/spin_devPath_uart"
>
</Spinner>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/lab_baud"
android:text="波特率:"
android:layout_alignBaseline="@+id/spin_devPath"
android:layout_toRightOf="@+id/spin_devPath"
android:layout_toEndOf="@+id/spin_devPath"
android:layout_marginLeft="10dp"
/>
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/spin_baud"
android:layout_alignBaseline="@+id/lab_baud"
android:layout_toRightOf="@+id/lab_baud"
android:layout_toEndOf="@+id/lab_baud"
android:entries="@array/spin_baud"
></Spinner>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/lab_connect"
android:text="连接设备："
android:layout_below="@+id/lab_devPath"
android:layout_marginTop="20dp"
/>
<Button
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn_connect"
android:text="Open"
android:textAllCaps="false"
android:layout_below="@+id/lab_devPath"
android:layout_alignLeft="@+id/spin_devPath"
/>
</RelativeLayout>
<TextView
android:id="@+id/tv_show"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:text="当前操作项：连接设备"
android:layout_marginLeft="5dp"
android:layout_marginBottom="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.constraint.ConstraintLayout>fragment_keystone_correct.xml，源码如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="@+id/layout_functionSet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/layout_communication"
android:layout_marginTop="10dp"
>
<TextView
android:layout_width="210dp"
android:gravity="center|right"
android:layout_height="wrap_content"
android:id="@+id/lab_hCalibration"
android:text="Horizontal Calibration:"
android:textSize="20sp"
/>
<EditText
android:layout_width="45dp"
android:layout_height="wrap_content"
android:id="@+id/et_hCalibration"
android:text="0"
android:enabled="false"
android:focusable="false"
android:layout_alignBaseline="@id/lab_hCalibration"
android:layout_toEndOf="@+id/lab_hCalibration"
android:layout_toRightOf="@+id/lab_hCalibration"
android:layout_marginLeft="10dp"
android:textSize="20sp"
/>
<SeekBar
android:layout_width="450dp"
android:layout_height="wrap_content"
android:id="@+id/sb_hCalibration"
android:max="90"
android:layout_alignBaseline="@id/et_hCalibration"
android:layout_toRightOf="@+id/et_hCalibration"
android:layout_toEndOf="@+id/et_hCalibration"
android:layout_marginLeft="20dp"
/>
<TextView
android:layout_width="210dp"
android:gravity="center|right"
android:layout_height="wrap_content"
android:id="@+id/lab_vCalibration"
android:text="Verital Calibration:"
android:textSize="20sp"
android:layout_below="@+id/lab_hCalibration"
android:layout_marginTop="10dp"
/>
<EditText
android:layout_width="45dp"
android:layout_height="wrap_content"
android:id="@+id/et_vCalibration"
android:text="0"
android:enabled="false"
android:focusable="false"
android:layout_alignBaseline="@id/lab_vCalibration"
android:layout_toEndOf="@+id/lab_vCalibration"
android:layout_toRightOf="@+id/lab_vCalibration"
android:layout_marginLeft="10dp"
android:textSize="20sp"
/>
<SeekBar
android:layout_width="450dp"
android:layout_height="wrap_content"
android:id="@+id/sb_vCalibration"
android:max="90"
android:layout_alignBaseline="@id/et_vCalibration"
android:layout_toRightOf="@+id/et_vCalibration"
android:layout_toEndOf="@+id/et_vCalibration"
android:layout_marginLeft="20dp"
/>
<TextView
android:layout_width="210dp"
android:gravity="center|right"
android:layout_height="wrap_content"
android:id="@+id/lab_zRotate"
android:text="Z Rotate:"
android:textSize="20sp"
android:layout_below="@+id/lab_vCalibration"
android:layout_marginTop="10dp"
/>
<EditText
android:layout_width="45dp"
android:layout_height="wrap_content"
android:id="@+id/et_zRotate"
android:text="0"
android:enabled="false"
android:focusable="false"
android:layout_alignBaseline="@id/lab_zRotate"
android:layout_toEndOf="@+id/lab_zRotate"
android:layout_toRightOf="@+id/lab_zRotate"
android:layout_marginLeft="10dp"
android:textSize="20sp"
/>
<SeekBar
android:layout_width="450dp"
android:layout_height="wrap_content"
android:id="@+id/sb_zRotate"
android:max="90"
android:layout_alignBaseline="@id/et_zRotate"
android:layout_toRightOf="@+id/et_zRotate"
android:layout_toEndOf="@+id/et_zRotate"
android:layout_marginLeft="20dp"
/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/layout_functionSet1"
android:layout_below="@+id/layout_functionSet"
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<TextView
android:layout_width="210dp"
android:gravity="center|right"
android:layout_height="wrap_content"
android:id="@+id/lab_digFocus"
android:text="Dig.Focus:"
android:textSize="20sp"
/>
<EditText
android:layout_width="45dp"
android:layout_height="wrap_content"
android:id="@+id/et_digFocus"
android:text="0"
android:enabled="false"
android:focusable="false"
android:layout_alignBaseline="@id/lab_digFocus"
android:layout_toEndOf="@+id/lab_digFocus"
android:layout_toRightOf="@+id/lab_digFocus"
android:layout_marginLeft="10dp"
android:textSize="20sp"
/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/cb_dfOn"
android:text="ON"
android:layout_alignBaseline="@id/et_digFocus"
android:layout_toEndOf="@+id/et_digFocus"
android:layout_toRightOf="@+id/et_digFocus"
android:layout_marginLeft="20dp"
/>
<SeekBar
android:layout_width="450dp"
android:layout_height="wrap_content"
android:id="@+id/sb_digFocus"
android:max="100"
android:layout_alignBaseline="@id/cb_dfOn"
android:layout_toRightOf="@+id/cb_dfOn"
android:layout_toEndOf="@+id/cb_dfOn"
android:layout_marginLeft="20dp"
/>
<TextView
android:layout_width="210dp"
android:gravity="center|right"
android:layout_height="wrap_content"
android:id="@+id/lab_unifoBri"
android:text="Unifo.Bri:"
android:textSize="20sp"
android:layout_below="@+id/lab_digFocus"
android:layout_marginTop="10dp"
/>
<EditText
android:layout_width="45dp"
android:layout_height="wrap_content"
android:id="@+id/et_unifoBri"
android:text="0"
android:enabled="false"
android:focusable="false"
android:layout_alignBaseline="@id/lab_unifoBri"
android:layout_toEndOf="@+id/lab_unifoBri"
android:layout_toRightOf="@+id/lab_unifoBri"
android:layout_marginLeft="10dp"
android:textSize="20sp"
/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/cb_unifoBri"
android:text="ON"
android:layout_alignBaseline="@id/et_unifoBri"
android:layout_toEndOf="@+id/et_unifoBri"
android:layout_toRightOf="@+id/et_unifoBri"
android:layout_marginLeft="20dp"
/>
<SeekBar
android:layout_width="450dp"
android:layout_height="wrap_content"
android:id="@+id/sb_unifoBri"
android:max="100"
android:layout_alignBaseline="@id/cb_unifoBri"
android:layout_toRightOf="@+id/cb_unifoBri"
android:layout_toEndOf="@+id/cb_unifoBri"
android:layout_marginLeft="20dp"
/>
<TextView
android:layout_width="210dp"
android:gravity="center|right"
android:layout_height="wrap_content"
android:id="@+id/lab_hLinear"
android:text="H.Linear:"
android:textSize="20sp"
android:layout_below="@+id/lab_unifoBri"
android:layout_marginTop="10dp"
/>
<EditText
android:layout_width="45dp"
android:layout_height="wrap_content"
android:id="@+id/et_hLinear"
android:text="0"
android:enabled="false"
android:focusable="false"
android:layout_alignBaseline="@id/lab_hLinear"
android:layout_toEndOf="@+id/lab_hLinear"
android:layout_toRightOf="@+id/lab_hLinear"
android:layout_marginLeft="10dp"
android:textSize="20sp"
/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/cb_hLinear"
android:text="ON"
android:layout_alignBaseline="@id/et_hLinear"
android:layout_toEndOf="@+id/et_hLinear"
android:layout_toRightOf="@+id/et_hLinear"
android:layout_marginLeft="20dp"
/>
<SeekBar
android:layout_width="450dp"
android:layout_height="wrap_content"
android:id="@+id/sb_hLinear"
android:max="100"
android:layout_alignBaseline="@id/cb_hLinear"
android:layout_toRightOf="@+id/cb_hLinear"
android:layout_toEndOf="@+id/cb_hLinear"
android:layout_marginLeft="20dp"
/>
<TextView
android:layout_width="210dp"
android:gravity="center|right"
android:layout_height="wrap_content"
android:id="@+id/lab_vLinear"
android:text="V.Linear:"
android:textSize="20sp"
android:layout_below="@+id/lab_hLinear"
android:layout_marginTop="10dp"
/>
<EditText
android:layout_width="45dp"
android:layout_height="wrap_content"
android:id="@+id/et_vLinear"
android:text="0"
android:enabled="false"
android:focusable="false"
android:layout_alignBaseline="@id/lab_vLinear"
android:layout_toEndOf="@+id/lab_vLinear"
android:layout_toRightOf="@+id/lab_vLinear"
android:layout_marginLeft="10dp"
android:textSize="20sp"
/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/cb_vLinear"
android:text="ON"
android:layout_alignBaseline="@id/et_vLinear"
android:layout_toEndOf="@+id/et_vLinear"
android:layout_toRightOf="@+id/et_vLinear"
android:layout_marginLeft="20dp"
/>
<SeekBar
android:layout_width="450dp"
android:layout_height="wrap_content"
android:id="@+id/sb_vLinear"
android:max="100"
android:layout_alignBaseline="@id/cb_vLinear"
android:layout_toRightOf="@+id/cb_vLinear"
android:layout_toEndOf="@+id/cb_vLinear"
android:layout_marginLeft="20dp"
/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/layout_coordinateSet"
android:layout_below="@+id/layout_functionSet1"
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="210dp"
android:gravity="center|right"
android:layout_height="wrap_content"
android:id="@+id/lab_x"
android:text="X-Axis:"
android:textSize="20sp"
/>
<EditText
android:layout_width="45dp"
android:layout_height="wrap_content"
android:id="@+id/et_x"
android:text="0"
android:enabled="false"
android:focusable="false"
android:layout_alignBaseline="@id/lab_x"
android:layout_toEndOf="@+id/lab_x"
android:layout_toRightOf="@+id/lab_x"
android:layout_marginLeft="10dp"
android:textSize="20sp"
/>
<SeekBar
android:layout_width="450dp"
android:layout_height="wrap_content"
android:id="@+id/sb_x"
android:max="100"
android:layout_alignBaseline="@id/et_x"
android:layout_toRightOf="@+id/et_x"
android:layout_toEndOf="@+id/et_x"
android:layout_marginLeft="20dp"
/>
<TextView
android:layout_width="210dp"
android:gravity="center|right"
android:layout_height="wrap_content"
android:id="@+id/lab_y"
android:text="Y-Axis:"
android:textSize="20sp"
android:layout_below="@+id/lab_x"
android:layout_marginTop="10dp"
/>
<EditText
android:layout_width="45dp"
android:layout_height="wrap_content"
android:id="@+id/et_y"
android:text="0"
android:enabled="false"
android:focusable="false"
android:layout_alignBaseline="@id/lab_y"
android:layout_toEndOf="@+id/lab_y"
android:layout_toRightOf="@+id/lab_y"
android:layout_marginLeft="10dp"
android:textSize="20sp"
/>
<SeekBar
android:layout_width="450dp"
android:layout_height="wrap_content"
android:id="@+id/sb_y"
android:max="100"
android:layout_alignBaseline="@id/et_y"
android:layout_toRightOf="@+id/et_y"
android:layout_toEndOf="@+id/et_y"
android:layout_marginLeft="20dp"
/>
<TextView
android:layout_width="210dp"
android:gravity="center|right"
android:layout_height="wrap_content"
android:id="@+id/lab_z"
android:text="Z-Axis:"
android:textSize="20sp"
android:layout_below="@+id/lab_y"
android:layout_marginTop="10dp"
/>
<EditText
android:layout_width="45dp"
android:layout_height="wrap_content"
android:id="@+id/et_z"
android:text="0"
android:enabled="false"
android:focusable="false"
android:layout_alignBaseline="@id/lab_z"
android:layout_toEndOf="@+id/lab_z"
android:layout_toRightOf="@+id/lab_z"
android:layout_marginLeft="10dp"
android:textSize="20sp"
/>
<SeekBar
android:layout_width="450dp"
android:layout_height="wrap_content"
android:id="@+id/sb_z"
android:max="100"
android:layout_alignBaseline="@id/et_z"
android:layout_toRightOf="@+id/et_z"
android:layout_toEndOf="@+id/et_z"
android:layout_marginLeft="20dp"
/>
</RelativeLayout>
</LinearLayout>
第四步：针对上面2个layout分别新建一个class来处理各自的响应事件等。这里为了简单，只是实现了显示功能，其他点击响应事件的都省略了。
DeviceConnect.java 用来管理 fragment_device_connect.xml，源码如下：
package com.terawins.www.t613_ui_tool;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class DeviceConnect extends Fragment{
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_device_connect, container, false);
//do other things...
return view;
}
}
KeyStoneCorrect.java用来管理 fragment_keystone_correct.xml，源码如下：
package com.terawins.www.t613_ui_tool;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class KeyStoneCorrect extends Fragment{
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_keystone_correct, container, false);
//do others
return view;
}
}
第五步：新建一个适配器class来关联，直接附上源码了：
package com.terawins.www.t613_ui_tool;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import java.util.ArrayList;
public class SubFragmentsAdapter extends FragmentStatePagerAdapter{ //adapter all the sub Fragments which need to be shown
private ArrayList<Fragment> m_subFragments;
private String []m_subTitles;
public SubFragmentsAdapter(FragmentManager fm)
{
super(fm);
}
@Override
public android.support.v4.app.Fragment getItem(int position) {
return m_subFragments.get(position);
}
@Override
public int getCount() {
return m_subFragments.size();
}
@Override
public CharSequence getPageTitle(int pos)
{
return m_subTitles[pos];
}
//set subFragments
public void SetSubFragments(ArrayList<Fragment> subFragments, String []subTitles)
{
this.m_subFragments = subFragments;
this.m_subTitles = subTitles;
}
}
第六步：在MainActivity里面将标签页功能做好，仅供参考。直接附上源码了：
package com.terawins.www.t613_ui_tool;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.design.widget.TabLayout;
import android.os.Bundle;
import android.widget.Toast;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private ArrayList<Fragment> m_subFragments = new ArrayList<Fragment>();
private String []m_subTitles = {"DeviceConnect", "KeyStoneCorrect"};
private TabLayout m_tab_layout_container = null;
private ViewPager m_vp = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
m_tab_layout_container = findViewById(R.id.tab_layout_container);
m_tab_layout_container.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
//Toast.makeText(MainActivity.this, tab.getText().toString(), Toast.LENGTH_SHORT).show();
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
m_vp = findViewById(R.id.vp);
m_subFragments.add(new DeviceConnect());
m_subFragments.add(new KeyStoneCorrect());
SubFragmentsAdapter sfa = new SubFragmentsAdapter(getSupportFragmentManager());
sfa.SetSubFragments(m_subFragments, m_subTitles);
m_vp.setAdapter(sfa);
m_tab_layout_container.setupWithViewPager(m_vp);
}
}
---- The End.
扫一扫
4022
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
